【读CSS规范】关于Z-INDEX

问题描述

问 题

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

加黑那句该如何翻译和理解？

解决方案

需要层叠的元素是指那些z-index不为auto的元素(auto和0是不完全一样，根元素一定会生成一个层叠环境)，一个需要层叠的元素会生成一个层叠环境，一个元素（准确说是层叠环境）把其中需要层叠元素（层叠环境）作为一个整体决定其前后关系。

<p style="z-index:0">
    <a style="z-index:20"></a>
    <b style="z-index:10">
     <b1 style="z-index:0"></b1>
     <b2 style="z-index:30"></b2>
    </b>
</p>

p把a b分别作为一个整体决定其前后关系。根据a b 的z-index,要么a在整个b元素的前面，要么在后面，而(黑体文字的意思是)a不会出现在b1 b2 之间。

对于b中的两个元素来说，a就是在其他层叠环境中的(other stacking contexts),他不应该出现在b1和b2之间。这是因为b的z-index不为auto，所以b作为一个需要层叠的元素会生成新的一级层叠环境，他作为一个整体决定和 a的前后关系。因此，a不会出现在b1 b2之间。

如果b的z-index为 auto，则b不生成层叠环境，这时a b1 b2 实在同一个层叠环境中，a可以在b1 b2之间

这篇关于【读CSS规范】关于Z-INDEX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！