什么是 z-index，它的用途是什么？ [复制]

Question

我正在学习网页设计。我不知道 z-index 和 它是做什么用的... 我正在尝试定位下拉菜单。我读到它对书中的菜单很有用。 如果有人回答我，我将不胜感激。

Answer 1

您可以随时查看文档：

z-index 属性指定元素的 z 顺序及其 子孙。当元素重叠时，z-order 决定哪一个 覆盖另一个。 z-index 较大的元素通常覆盖 具有较低元素的元素。

对于定位框，z-index 属性指定：

• 当前stacking context中box的堆栈层级。

• 列表项框是否建立本地堆叠上下文。

例子：

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3;
  /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2;
  /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 20em;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

z-index