css-定位、浮动和标准流的元素层级比较

CSS - 元素层级问题

不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

不同定位之间的层级关系：

• 相对、绝对、固定的层级相同

• 此时HTML中写在下面的元素会覆盖上面的元素

例：

 

 

 表现出来就是：

 

 

 可以看到，此时green浮动后覆盖了blue，表示浮动后元素层级 > 标准流

 

然后，给blue添加定位：

 

 

 就变成了：

 

 可以看到，给blue添加了定位之后，blue又覆盖了green，表示定位后的元素层级 > 浮动 > 标准流

 

另外，观察，如果给三个盒子都赋予定位，结果会如何呢？

 

 结果为：

 

 那么，就一定是固定定位 > 绝对定位 > 相对定位了吗？并不是

更换书写位置：

 

 发现结果：

 

 由于此时green在书写顺序中排最后，所以它层叠了另外两个盒子

由此可以得到结论：定位的盒子，层级是相同的，覆盖顺序由书写顺序所决定，即书写在最后的就覆盖前面所有的