Question

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

Answer 1

您随时可以查看文档：

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

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



当前stacking context中框的堆栈级别。



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

示例：

.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

什么是z-index以及它用于什么？

1 个答案: