定位
相对定位不脱离标准流,绝对定位和固定地位脱离标准流。
position: relative;
position: absolute;
position: fixed;
相对定位
- 相对定位性质:不脱标,不会让出原始位置,盒子会在偏移位置加载;偏移量有正负之分。
- 同时设置left和right偏移,只会加载left;同时设置top和bottom偏移只会加载top。
- 应用:
- 菜单栏下划提示线:设置下边框,同时盒子相对上移。
- 设置文本段落的角标引用。
<style>
p {
width: 100px;
height: 100;
position: relative;
left: 100px; 盒子左边相对原始位置空100px
top: 100px; 盒子顶部相对原始位置空100px
}
</style>
绝对定位
参考的是距离最近的有定位的祖先元素,如果没有则参考body。
- 绝对定位性质:脱离了标准流,让出了标准流的位置,后面的标准流会占领该元素脱标之前的位置。
- 应用:制作压盖、绝对居中
固定定位
参考浏览器窗口,进行偏移,即固定在浏览器窗口上。
- 固定定位是脱标的,让出了标准流的位置。
压盖顺序
- HTML标签的书写顺序影响压盖顺序,与CSS选择器顺序无关无关。
- 元素有定位,可设置z-index属性影响压盖顺序,值大的压盖小的。