为什么我写的z-index不生效?( 二 )


为什么我写的z-index不生效?

文章插图
行内元素的层叠顺序为什么要高于块级元素与浮动元素这个理解起来其实很简单,像border/background属于装饰元素的属性,浮动和块级元素一般用来页面布局,而内联元素一般都是文字内容,并且网页设计之初最重要的就是文字内容,所以在发生层叠时会优先显示文字内容 , 保证其不被覆盖 。
层叠顺序规则
  • 谁大谁上:当具有明显的层叠水平标示的时候 , 比如说z-index值,在同一个层叠上下文领域,层叠水平值大的覆盖小的
  • 后来居上:当元素的层叠水平一致、层叠顺序相同的时候 , 在DOM流中处于后面的元素会覆盖前面的元素 。
z-index
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order 。当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示 。
属性值
  • auto: 默认值,当前值与父级相同
  • <integer>: 整型数字
基本特性
  1. z-index 属性允许为负值 。
  2. z-index 属性支持 CSS3 animation 动画 。
  3. 在 CSS 2.1 的时候,需要配合 position 属性且值不为 static 时使用 。
解惑了解完上面这些内容,现在我们再来看一看前文提到的一些问题
1.为什么我写的z-index没有生效?这个很简单,因为它单独使用时不生效,一定要配合定位属性一起,即只对指定了position属性的元素生效——只要不是默认值static,其他的absolute、relative、fixed都可以使z-index生效 。(在CSS3之后,弹性元素的子元素也可以生效)
2.为什么z-index大的元素却没有盖住z-index小的元素?这里我们可以来看一个有趣的现象
<style>  .box1 {    width: 200px;    height: 100px;    background: red;}  .box2 {    width: 100px;    height: 200px;    background: greenyellow;}</style><div style="position:relative; z-index:auto;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div>?<div style="position:relative; z-index:auto;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>
为什么我写的z-index不生效?

文章插图
这么看还挺正常的,z-index值大的在z-index值小的上方 。接下来我们稍微改一改 , 你就能看到奇怪的现象了
<div style="position:relative; z-index:0;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div>?<div style="position:relative; z-index:0;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>
为什么我写的z-index不生效?

文章插图
这里我们只是把它们父元素的z-index属性从auto改成了0 , 两种情况的表现却截然相反 。
产生这种现象的原因我们也能够从上面的理论中找到答案:position属性为非 static值并设置z-index属性为具体数值才能产生层叠上下文
当z-index为auto时 , 是一个普通元素,两个box层比较不受父级的影响,按照规则谁大谁上 , 于是z-index为2的box覆盖值为1的box; 当z-index为0时,会创建一个层叠上下文,此时的层叠规则就发生了变化 。层叠上下文特性里最后一条规则 , 每个层叠上下文都是独立的 。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序 。由于两者z-index都是0,所以,遵循层叠规则后来居上,根据在DOM出现的先后顺序决定谁在上面,于是 , 位于后面的box2覆盖box1 。此时box元素上的z-index是没有任何意义的 。
3.如何让父元素盖住子元素?这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了,可事实真是如此吗?
<style>.outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    z-index: 3;}  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: 1;}</style><div class="outer">父元素  <div class="inner">子元素</div></div>

推荐阅读