z index无效,z-index生效条件

　　表面看起来，z索引似乎是一个很简单的属性，你给它设置哪个值，元素就会位于z轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。

　　在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z指数，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。

三个自测问题

　　 问题一：为什么z指数数值更大，但内容没有在方框2之上？div id= Box 1 Box 1/div div id= Content Content br/z-index:2；/div div id= Box 2 Box 2 br/z-index:1；/div div { padding:25px；字体大小：较大；}#box1 {背景色：巧克力色；宽度：200像素高度：100像素边距-底部：-50px；} #内容{背景色：金色；宽度：300像素高度：200pxz指数：2;}#box2 {背景色：青色；宽度：200像素高度：100像素边距-顶部：-50px；z指数：1;}

　　问题二：明明z指数数值更小，为什么内容这次反而在方框2之上了？div id= Box 1 Box 1/div div id= Content Content br/transform:旋转(90度)；br/z-index:1；/div div id= Box 2 br/Box 2 br/z-index:2；/div div { padding:25px；字体大小：较大；}#box1 {背景色：巧克力色；宽度：200像素高度：100像素边距-底部：-10px；} #内容{背景色：金色；宽度：250像素高度：200pxz指数：1;变换：旋转(90度);}#box2 {背景色：青色；宽度：200像素高度：100像素页边距-顶部：-10px；z指数：2;}

　　问题三：为什么明明z指数是最大的，但方框2-3在内容之下？div id= Box 1 Box 1/div div id= Content Content br/z-index:2；br/位置：相对；/div div id= Box 2 br/br/Box 2 br/z-index:1；br/位置：相对；div id= Box 2-3 Box 2-3br/z-index:5；br/位置：绝对；/div/div div { padding:25px；字体大小：较大；}#box1 {背景色：巧克力色；宽度：200像素高度：100像素边距-底部：-50px；} #内容{背景色：金色；宽度：200像素高度：100像素左边距：50pxz指数：2;位置：相对；}#box2 {背景色：青色；宽度：200像素高度：100像素边距-顶部：-50px；z指数：1;位置：相对；} #框2-3 {背景色：绿色；宽度：200像素高度：100像素左填充：150像素左：180 pxtop:-50px；z指数：5;位置：绝对；}

z-index 简介

　　 没有使用z指数的时候，元素的层叠关系由2个因素决定：

　　该元素的位置是否是静态的，如果是静态的，那么这个元素就称为非定位；反之，如果位置值是相对的，绝对的，固定的，或粘的则称已定位。安置元素享受特权，会覆盖非定位元素。而非定位元素中，有漂浮物样式的元素覆盖没有漂浮物的。元素的"出场"顺序—— 即在超文本标记语言中的顺序，同类型元素遵循后来者居上的原则z指数属性设定了一个定位元素及其后代元素或弯曲项目的z顺序。当元素之间重叠的时候，z索引较大的元素会覆盖较小的元素在上层进行显示。

　　所谓z指数，只有在以下场景适用。分别为：

　　首先，属性z-index并不适用于所有元素。它只对定位的元素有效。判断元素在Z轴上的堆叠顺序，不仅要直接比较两个元素的Z索引值，还要通过元素的堆叠上下文和堆叠级别来确定堆叠顺序。

层叠上下文

　　 z-index存在于一个堆栈上下文的背景中，在中文中经常翻译为层叠上下文(实际上数据结构中的单词stack也是Stack，所以层叠上下文中已经隐含了后来者居上的意思)。

　　级联上下文是HTML中的一个三维概念。在CSS2.1规范中，每个盒子模型的位置是三维的，即X轴、Y轴和Z轴代表平面画布上的纹理。

　　一般来说，元素在页面上是沿着X轴和Y轴平铺的，我们无法感知它们在Z轴上的层叠关系。一旦元素被堆叠，可以发现一个元素可能覆盖另一个元素或者被另一个元素覆盖。

　　如果一个元素包含了层叠上下文(也就是说是层叠上下文元素)，我们可以理解为这个元素在Z轴上“优越”，最终的表现就是离屏幕查看者更近了。

　　构建上下文类似于盖楼:

　　首先，html元素是地平线或者基础。所有的建筑都是从地基开始建造的。

　　接下来，每生成一个级联上下文，就相当于盖了一栋楼，z-index的值相当于楼的高度。

　　下列元素可以生成级联上下文：

　　元素的位置值是绝对的或相对的，z索引值不是auto(默认值)。元素的位置值是固定的或粘性的。元素是flexbox容器的子元素。且z索引值不是auto(默认值)元素是网格容器的子元素，并且z索引值不是auto(默认值)。该元素具有不透明度值，并且其值小于1。该元素具有以下任何值，并且该值不为none:transform filter perspective clip-path mask/mask-image/mask-border元素具有隔离值，并且其值为isolate。该元素具有mix-blend-mode值，并且其值不正常。该元素具有-webkit-overflow-scrolling值，其值为touch。还有其他几种不受欢迎的情况。第三，级联上下文是可以嵌套的3354，这是最容易误导的一个。

　　顾名思义，嵌套意味着一个级联上下文可以创建另一个级联上下文。

　　如果在地基上建一个50米高的楼(即z指数：50)，楼里还能建一个100米高的中楼吗？

　　当然不是！但是你可以在这栋楼里建一个100步的大厅。

　　换句话说，在嵌套级联上下文中，子级联上下文仅限于父级联上下文，它们的z-index“单位”是不同的(z-index没有单位，这一面仅用于理解)。子级联上下文的z-index值再大，也无法突破父级联上下文的高度。

　　级联上下文摘要：

　　元素的一级级联上下文具有特定样式的元素可以生成新的级联上下文，z-index的值在这些元素中有效。子级联上下文的“高度”受父级联上下文的限制。在同级级联上下文中，没有(有效)z索引的元素仍然遵循上一节的规则；z索引值相同的元素遵循后来者居上的原则。注意：级联上下文的嵌套与元素的嵌套不是一一对应的。元素的父级级联上下文是由第一个可以生成级联上下文的元素生成的级联上下文，该元素由内向外查找。

　　看一个例子就明白了：

　　div id= div 1 style= position:relative；z-index:1 div id= div 2 style= position:relative；z-index: 1 所在的父级级联上下文是div 1/div div id= div 3 div id= div 4 style= position:relative生成的级联上下文；z-index: 2 所在的父级联上下文也是由div1/div/div生成的级联上下文。虽然div4之外还有一层div3，但是由于div3不能生成级联上下文，因此，div4所在的父级联上下文也是div1(生成的级联上下文)3354。虽然div4在html元素层次结构中比div2深一级，但是div4和div2在级联上下文中处于同一级别，因此它们可以相互比较z-index值来决定谁在上面。

三个问题的解答

　　学习完上面z-index的相关知识点，我们来回答一下开头提出的三个问题。

　　第一个问题中z-index不生效的原因是这三个元素不能产生层叠上下文，所以z-index值对它们不生效。3354按出现顺序，内容在方框2下面。

　　第二个问题的框2不能产生层叠上下文，所以z-index也无效；因为内容使用了transform属性，所以生成了级联上下文，这相当于建造一座1米高的建筑(z-index: 1)。

　　Box 2和Content在同一个层次上下文中，Box 2的z-index比较小，所以Box 2在Content下面；此外，框2-3在框2的分层上下文下创建新的子分层上下文，因此框2-3的高度被限制在框2内，因此框2-3具有高z索引是无用的。

　　关于为什么我的z-index又不行了，这篇文章到此结束。有关无效z索引的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。