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

Question

我有这段代码

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Answer 1

z-index适用于定位元素

来自MDN

z-index属性指定元素的z顺序及其值   后人。当元素重叠时，z顺序决定哪一个   涵盖了另一个。具有较大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>

Answer 2

虽然此处发布的其他答案可以解决问题，但它们并不完全正确。

以下陈述是错误的：

z-index仅适用于定位元素。

z-index仅适用于定位的元素。

z-index仅适用于非position:static的元素，即默认位置。

在许多情况下，必须定位一个元素才能使z-index起作用。但并非所有情况都适用。

flex items或grid items元素可以使用z-index创建堆叠上下文，即使position为static（see demo）。< / p>

就这一具体问题而言，#tsub出现在#mtitle之上的原因是：

div#tsub位于HTML中的h1#mtitle之后，AND
z-index应用于#mtitle的属性被忽略，因为#mtitle未定位，也不是flex或网格项。

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

将z-index: 0上的#tsub更改为z-index: -1，或
将position: relative添加到#mtitle

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

关于问题的最后部分，

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

带有position: absolute的元素被“取出”常规元素流，它们不占用其父元素中的任何空格（需要static以外的位置设置工作），他们只是固定在他们身上（=将与他们一起移动）。但这样他们就可以与其他元素重叠。

在几个绝对定位的元素中，z-index将决定哪一个在另一个元素的顶部。

具有较高z-index值的元素不会覆盖另一个

4 个答案:

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