具有更高z-index值的元素未覆盖另一个元素

Question

我有这段代码。

#mtitle {
  display: inline-block;
  margin: 0;
  background-color: #000000;
  z-index: 999;
}
#tsub {
  display: inline-block;
  margin-left: 0;
  left: 0;
  position: absolute;
  font-size: 85px;
  z-index: 0;
}

<header>
  <h1 id="mtitle">Tepid Beans</h1>
  <div id="tsub"><span>- Games</span>
  </div>
</header>

#tsub 出现在 #mtitle 的上方，我不知道为什么。

- Damon Jenkins

Answer 1

z-index 属性仅适用于定位元素，但是对于 CSS3 中的 flex 子元素 或 grid 元素 而言，当元素为 static 时也可以使用 z-index。

引自 MDN

z-index 属性指定了一个元素及其后代元素的层叠顺序。当元素重叠时，层叠顺序决定哪一个元素会覆盖其他元素。具有较高 z-index 值的元素通常覆盖具有较低值的元素。

对于定位元素，z-index 属性指定了：

• 在当前堆叠上下文中，该盒子的堆叠级别。

• 该盒子是否建立了一个局部的堆叠上下文。

适用于 定位元素

将 position:relative 应用于父元素 header，将 position:absolute 应用于元素 #mtitle，并更改其 z-index 值。

body {
  margin: 0
}
header {
  position: relative
}
#mtitle {
  display: inline-block;
  background-color: #000000;
  position: absolute;
  margin:0;
  z-index: 0;
  color: #fff
}
#tsub {
  display: inline-block;
  left: 0;
  position: absolute;
  font-size: 85px;
  z-index: -1;
  background: red
}

<header>
  <h1 id="mtitle">Tepid Beans</h1>
  <div id="tsub">- Games</div>
</header>

- dippas

Answer 2

虽然这里发布的其他答案解决了问题，但它们并不完全正确。

以下陈述是错误的:

- `z-index` 仅适用于定位元素。 - `z-index` 仅适用于已定位的元素。 - `z-index` 仅适用于非默认位置（即 `position:static`）的元素。

在许多情况下，元素必须定位才能使 `z-index` 生效。但并非所有情况都是如此。

作为 flex items 或 grid items 的元素可以使用 `z-index` 创建堆叠上下文，即使 position 是 static (查看演示)。

针对这个具体问题，#tsub 出现在 #mtitle 上面的原因是：

1. div#tsub 在 HTML 中位于 h1#mtitle 之后，并且
2. #mtitle 应用的 z-index 属性被忽略了，因为它既不是定位元素，也不是 flex 或 grid 项。

以下是两种可能的解决方案：

1. 将 #tsub 上的 z-index: 0 改为 z-index: -1，或者
2. 在 #mtitle 上添加 position: relative

#mtitle {
  display: inline-block;
  margin: 0;
  background-color: aqua;  /* changed for illustration purposes */
  z-index: 999;
}
#tsub {
  display: inline-block;
  margin-left: 0;
  left: 0;
  position: absolute;
  font-size: 85px;
  z-index: -1;   /* adjustment here */
}

<header>
  <h1 id="mtitle">Tepid Beans</h1>
  <div id="tsub"><span>- Games</span>
  </div>
</header>

- Michael Benjamin

Answer 3

z-index只对已定位的元素起作用。因此，如果您将position: relative;添加到#mtitle，则z-indexing将起作用。

- Buzilla

Answer 4

关于您问题的最后一部分，

tsub会出现在#mtitle的顶部，我不知道为什么。

position: absolute属性的元素被“取出”了正常元素流，它们不占据父元素中的任何空间（需要设置非static的位置才能生效），它们只与其锚定的父元素绑定（=将随它们一起移动）。但这样它们就可以重叠其他元素。

在多个绝对定位的元素中，z-index属性将决定哪一个在另一个元素上面。

- Johannes