不起眼的回形针,原来还有这几个厉害用途,花钱都难买到( 二 )

2022-09-10 生活百科

那么知道怎么创建层叠上下文之后，问题的关键来了，层叠上下文有什么用呢？
这里一定要结合前面那张七阶图，最下面那一层background便是是建立在层叠上下文的基础上的，也就是说在层叠上下文中，所有的元素都会渲染在该元素的层叠上下文背景和边框上面；在block盒子、float盒子等不存在层级上下文的元素中，子元素设置z-index为负值的时候，那么子元素会被父元素遮挡。说了可能不太好理解，举个栗子消化一下：

#box1{ position: relative; width: 200px; height: 200px; background: blue; } #box2{ position: relative; z-index:-1; width: 100px; height: 100px; background: yellow; }
【不起眼的回形针,原来还有这几个厉害用途,花钱都难买到】这里，box1并没有创建层叠上下文，它的子元素box2所在的层叠上下文还是根元素。这里box2设置z-index:-1，box1的z-index:auto，因为box1和box2在同一个层叠上下文中，根据七阶图可以看出，box2的层叠水平小于box1，所以box1会绘制在box2上面。如图所示：

不起眼的回形针,原来还有这几个厉害用途,花钱都难买到

文章插图
那么怎么解决这个问题呢？相信大家已经知道这里该怎么处理了吧，是的，为box1建立一个层叠上下文，那么box2中的元素无论z-index是负的多少，都会显示在box1的背景之上，如图：

不起眼的回形针,原来还有这几个厉害用途,花钱都难买到

文章插图
这里我用了前面说的的第一种方式去创建层叠上下文，即定位元素中z-index不为auto的元素会建立层叠上下文，可能有的同学开始纳闷了，box1的z-index大于box2的z-index，为什么box2缺显示在box1的上面呢？呵呵，这正对应了七阶图的层叠水平的关系，不明白的再仔细揣摩一下七阶图。
· 层叠水平仅在直接父级层叠上下文中进行比较，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。举个例子
#box1{ z-index: 10; position: relative; width: 200px; height: 200px; background: green; } #box1_1{ position: relative; z-index: 100; width: 100px; height: 100px; background: blue; } #box2{ position: relative; z-index: 11; width: 200px; height: 200px; background: red; margin-top: -150px; }层叠上下文box1中的子元素box2设置z-index为100，而层叠上下文box2的z-index只有11，而实际的渲染效果却是，box2在box1和box1_1的上面，这就应了上面那就话，层叠水平仅在元素的第一个父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较，也就是活box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中（html根元素会默认创建层叠上下文），所以它们两个会进行层叠水平的比较，box2的z-index大于box1的z-index，所以我们看到的也就是下面这样，box2遮挡了box1，不在乎box1中的子元素z-index是多少，如图：

不起眼的回形针,原来还有这几个厉害用途,花钱都难买到

文章插图
这里我对z-index的理解也就讲述完毕了，大概就说了以下这几点内容：
1、z-index仅在定位元素（position不等于static）中有效
2、七阶层叠水平图
3、z-index层叠水平的比较仅限于父级层叠上下文中
其次需要注意以下几点：
1、在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。
2、非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）

上一篇：水滴屏和刘海屏的差距有多大,看完这些优缺点,你就知道怎么选_百度知 ...

下一篇：电脑上微信怎么发语音