当前位置：首页 > Web前端 > CSS

DOM层级顺序与z-index

时间：2023-03-30 16:05:18 CSS

前言DOM层级顺序，粗略地说，就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级的顺序，我们往往会想到用CSS的z-index属性来控制。虽然看起来很简单，但是有时候我们在使用的时候可能会遇到一些奇怪的问题：为什么有时候z-index设置的很大（比如9999），到最后还是显示不出来节点。正面？将z-index属性设置为0和不设置z-index属性有什么区别？浮动元素和定位元素谁的显示优先级更高？其实，看似简单的等级秩序自有一套规则。了解这些规则可以帮助我们避免开发中的陷阱。规则一、顺序规则如果position属性没有设置（或者设置为static），文档流后面的DOM节点会覆盖前面的DOM节点。A

B

PS：如何让文档流中的节点堆叠在一起？例如，我们可以将DOM的margin-top设置为负数，这样两个节点堆叠在一起。然而，为了简化描述，这些都没有写出来。下同。2、定位规则定位节点（position属性设置为relative、absolute或fixed的节点）会覆盖非定位节点（position属性未设置或position属性设置为static的节点）A

B

根据顺序规则和定位规则，我们可以做出更复杂的结构。设A和B为非定位节点，设A的子节点A-1为定位节点。

AB3.Participate常规的z-index属性只对定位的节点生效。共有三个DOM节点，它们被定位为静态。但是A的z-index最大，但还是垫底，C的z-index最小，但还是垫底。所以可以看出z-index并没有生效，此时order规则生效了。ABB我们把B和C的位置设置为relative后，顺序就变了。根据参与规则和定位规则，A不是定位节点，所以即使z-index最大，也是垫底的。根据参与规则和默认值规则（下一节介绍），B和C都是定位节点，B的z-index大于C，所以B在最上面。ABB4.默认值规则对于所有定位节点，z-index值大的节点会覆盖z-index值小的节点。z-index设置为0的节点和不设置z-index的节点在同一层次上没有区别。在IE6和7中，z-index的默认值为0，其他浏览器默认为auto。AB

C

D5。从父规则来看，节点A和B都是定位节点。如果A节点的z-index值大于B节点的z-index值，那么A节点的子元素会覆盖B节点和B节点的子节点。

A-1

B-1如果定位节点A和B的z-index值相同，那么根据Order规则，B会覆盖A，那么即使A的子节点的z-index比B的子节点大，B的子节点还是会覆盖A的子节点。（这就是为什么即使我们把A-1的z-index设置的很大，也还是覆盖不了B节点）。

A-1

B-16.Hierarchicaltree规则定位节点，而z-index是一个整数值（不包括z-index:auto），它会被放置在与DOMnodes不同的hierarchaltree中。在下面的DOM节点中，A和B是兄弟节点，但是在层次树中，A和B-1是兄弟节点（因为都是Root下第一层z-index为整数的定位节点），所以A是高于B和B-1。尽管A-1的z-index小于B-1，但根据来自父级的规则，A-1也高于B-1。

A-1

B-1下面是more复杂的层级树，聪明，你能理解为什么节点层级是这样的吗？

A-1divid="b">

B-1-1

C-1-1-1Cascadingcontext引入了很多规则，很难理解也很难记住。其实要理解这些规则，我们只需要理解一个概念，就是级联上下文。概念堆叠上下文是HTML元素的三维概念，它相对于面向（计算机屏幕）窗口或网页的用户沿着假想的z轴延伸。HTML元素根据自身的属性按优先级顺序占据堆叠上下文。空间。属性子元素的z-index值仅在父堆叠上下文中有意义。子层叠上下文自动被视为与父层叠上下文分开的单元。生成条件满足以下条件之一生成级联上下文：根元素（HTML）、z-index值不为"auto"的绝对/相对定位、position:fixedopacity属性的元素的transform属性值值小于1不是“none”元素过滤值不是“none”元素-webkit-overflow-scrolling属性设置为“touch”元素附录：层叠顺序表位置说明CSS1（底部）包含父元素stackingcontext2NegativeSub-elementsinstackingorderz-index:;position:relative(orabsoluteorfixed)3在文档流中，非内联、非定位的子元素显示：/*notinline*/;position:static4非定位浮动子元素float:left(orright);position:static5inlineflow,非定位子元素display:inline;position：static6子元素，堆叠顺序为0z-index：auto（或0）；position:position:relative(orabsoluteorfixed)7(top)正堆叠顺序的子元素z-index:;位置：相对（或绝对或固定）

上一篇：flex布局笔记排序

下一篇：[译]Netflix的网络性能案例研究

DOM层级顺序与z-index相关文章

最新推荐

猜你喜欢