css - D CSS3中z-index的auto和inherited的区别

Question

我正在研究 CSS3 的 z-index 属性，它有四个属性，auto、number、inline 和 inherit。我理解 number 和 inline 但 auto 和 inherit 使我感到困惑，因为 auto 意思是“将值设置为父值作为默认值”，而 inherit 意思是“从父项继承值”。我用谷歌搜索，但并没有真正理解。

Answer 1

z-index不被继承；每个元素的默认值为 auto .如果将其更改为 inherit然后它将直接从其父级获取值。

关键是auto不创建新的本地堆栈上下文，而 inherit ，如果 parent 有任何数值，确实会。

请查看此示例以获得更好的理解。你可以看到相同的 DOM 结构被复制了。在第一种情况下，div auto在 inherit 之前在另一个上；它是倒置的。

您可以看到 inherit value 与实际设置一样有效 z-index: <number>等于 parent ，而auto是默认值，不会创建新的堆叠顺序，只会根据 DOM 上确定的默认 z 顺序显示。如果将父项的值设置为 -1，那么继承将与设置 z-index: -1 完全相同。在 .inherit让它显示在.auto后面在两个 div 上。

$('#button0').click(function(e){
  $('.parent').css('z-index', '0');
});
$('#button1').click(function(e){
  $('.parent').css('z-index', '1');
});
$('#button-1').click(function(e){
  $('.parent').css('z-index', '-1');
});

.parent{
  position: relative;
  z-index: 1;
}
.parent > div{
  position: absolute;
}
.auto{
  z-index: auto; /* default value */
}
.inherit{
  z-index: inherit;  
}

/* --------------------- */
/* presentational styles */
.auto{
  background: green;
}
.inherit{
  top: 100px;
  background: red;
}
.parent{
  width: 200px;
  height: 200px;
  opacity: 1;
  margin: 10px;
  background: yellow;
  display: inline-block;
}
.parent > div{
  width: 100px;
  height: 100px;
  opacity: 0.95;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  first auto and then inherit on DOM
  <div class="auto">auto</div>
  <div class="inherit">inherit</div>
</div>

<div class="parent">
  first inherit and then auto on DOM
  <div class="inherit">inherit</div>
  <div class="auto">auto</div>
</div>

<div>
  <label>Change z-index of parent</label>
  <button id="button-1">To -1</button>
  <button id="button0">To 0</button>
  <button id="button1">To 1</button>
</div>

有关 MDN 的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index