position定位属性
取值
static: 静态定位 默认
relative: 相对定位 相对自己原来的位置
absolute: 绝对定位
fixed: 固定定位
静态定位
position属性的默认值；
元素按照标准流布局，left、right、top、bottom没有任何作用；
相对定位
元素按照标准流布局，可以通过left、right、top、bottom进行定位，定位参照对象是元素自己原来的位置。
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 20px;
left: 20px;
margin-top: 20px;
}
.box3{
background-color: blue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
- 相对定位注意点
- 在相对定位中同一个方向上的定位属性只能使用一个
top/bottom 只能用一个
left/right 只能用一个 - 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中区分块级元素/行内元素/行内块级元素
- 当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局（相当于给相对定位前的位置添加margin/padding）
相对定位应用场景:
- 用于对元素进行微调
- 配合绝对定位来使用
绝对定位
绝对定位就是相对于body或者某个定位流中的祖先元素来定位。
格式: position: absolute;
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: absolute;
left: 0;
top: 0;
}
.box3{
background-color: blue;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
- 绝对定位注意点
- 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
- 绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
相对于body定位会随着页面的滚动而滚动 - 绝对定位的元素会忽略祖先元素的padding
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
width: 300px;
height: 300px;
background-color: palevioletred;
border: 10px solid #000;
padding: 30px;
position: relative;
box-sizing: border-box;
}
.box2{
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
/*position: relative;*/
left: 0;
top: 0;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
标准流中的嵌套盒子
定位流中的嵌套盒子
- 绝对定位参考点
- 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点；
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点；
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点；
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
bottom: 0;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
bottom: 0;
}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
-
子绝父相
子元素用绝对定位，父元素用相对定位。
企业开发中很少单独使用绝对定位或相对定位。
相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流
-
绝对定位水平居中
1.当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中;
2.如果想让一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 50px;
background-color: red;
position: absolute;
/*无效*/
/*margin: 0 auto;*/
/*有效*/
left: 50%;
margin-left:-200px;
}
</style>
<body>
<div></div>
</body>
固定定位
固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
格式: position: fixed;
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 100px;
}
a{
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 25px;
text-decoration: none;
text-align: center;
color: #000;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
<body>
<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
<a href="#">^<br>顶部</a>
</body>
- 固定定位注意点
- 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
- 固定定位的元素不区分块级元素/行内元素/行内块级元素
- IE6不支持固定定位
-
固定定位应用场景
网页对联广告
网页头部通栏(穿透效果) -
z-index属性
默认情况下所有元素都有z-index属性，取值为0
专门用于控制定位流元素的覆盖关系
- 默认情况下，定位流中的元素会覆盖标准流中的元素
- 默认情况下，定位流中的元素，后面编写的会覆盖前面编写的元素
- 如果定位流的元素设置了z-index属性，那么谁的z-index值比较大，谁就显示在上面
注意点：
- 从父现象
1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index值比较大，谁就显示在上面；
1.2 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说，谁的父元素的z-index比较大，谁就显示在上面
粘滞定位
当元素的position属性设置为sticky时，则开启了元素的粘滞定位。
粘滞定位和相对定位的特点基本一致，不同的是，粘滞定位可以在元素到达某一位置时将其固定。
网友评论