五、CSS 速览 ——相对定位、绝对定位

定位

相对定位不脱离标准流，绝对定位和固定地位脱离标准流。

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属性影响压盖顺序，值大的压盖小的。