概念
- 规定元素的位置
- 主要用于没有规律的元素布局
- 相对定位、绝对定位、固定定位
使用：
- 规定是哪一种定位
- 指在一个方向上的偏移量top、bottom、left、right
- top和bottom同时设置则只有top生效
- left和right同时设置则只有left生效
相对定位
position：relative
- 指定之后，元素就是一个定位元素，脱离文档流
- 相对定位脱离文档流，当时原来的位置还得保留，并未完全脱离文档流
- left和top方向的设置优先
- （相对原来的位置进行偏移）
绝对定位
- 脱离文档流
- 原来位置不会保留
- 相对最近的、有定位属性、的父元素进行定位
- 如果找不到这类元素，才会依据body进行定位
定位偏移量
- 可以使用合法的尺寸单位
- 可以使用负值，元素的偏移方向与正值相反
- 元素相对于哪个元素进行定位，使用百分比时，就是哪个元素的宽/高的百分比（可以使用负的百分比）
.adpa{
position: relative;
width: 700px;
height: 500px;
}
.ab1{
position: absolute;
top: 100px;
}
<div class="abpa" style="border: 1px red solid;">
<div class="ab1"><img src="../duck.jpg" alt=""></div>
</div>
层级
- 每一定位元素会独占一层，不允许有其他元素
- 例
z-index: 2;改变元素浮动的层级来改变元素的堆叠的顺序 - 数字越大，元素的层级越高，即最在外面一层
- 默认值为0
- 当层级一样时，后写的元素会盖住前面写的元素
<body>
<img class="a" src="../SeanXiao.png" alt="">
<img class="b" src="../duck.jpg" alt="">
<img class="c" src="../flower.jpg" alt="">`
</body>
.a{
position: absolute;
top: 50px;
left: 50px;
}
.b{
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
.c{
position: absolute;
top: 150px;
left: 150px;
}
固定定位
position: fixed、top、bottom;
文档完全脱离文档流
是相较于浏览器的窗口进行定位
<body>
<img class="a" src="../SeanXiao.png" alt="">
<img class="b" src="../duck.jpg" alt="">
<img class="c" src="../flower.jpg" alt="">
<img class="d" src="../image.png" alt="">
</body>
.a{
width: 100%;
height: auto;
}
.d{
position: fixed;
top: 50px;
left: 5px;
height: auto;
}