web-dev-qa-db-ja.com

z-index値が高い要素が別の要素に重なっていない

私はこのコードを持っています

#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の上に表示されていますが、その理由はわかりません。

htmlcssz-index
10
Damon Jenkins

z-indexは配置された要素で機能しますが、 flex items または grid items のCSS3要素では、要素が静的な場合にz-indexを使用できます

From [〜＃〜] 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>
6
dippas

ここに投稿された他の回答は問題を解決しますが、それらは完全に正しいわけではありません。

次の記述は誤りです。

  • z-indexは配置された要素でのみ機能します。
  • z-indexは、配置されている要素に対してのみ機能します。
  • z-indexは、position:static以外の要素、つまりデフォルトの位置でのみ機能します。

多くの場合、z-indexが機能するためには要素を配置する必要があります。しかし、これはすべての場合に当てはまるわけではありません。

flex items または grid itemspositionがstatic（ デモを参照 ）の場合でも、z-indexを使用してスタッキングコンテキストを作成できます。

この特定の質問に関して、#tsubが#mtitleの上に表示される理由は、次の理由によるものです。

  1. div#tsubは、HTMLではh1#mtitleの後にあり、かつ
  2. z-indexが配置されておらず、フレックスまたはグリッドアイテムでもないため、#mtitleに適用された#mtitleプロパティは無視されます。

考えられる解決策は次の2つです。

  1. z-index: 0の#tsubをz-index: -1に変更するか、または
  2. position: relativeを#mtitleに追加します
#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>
3
Michael_B

z-indexは、配置されている要素に対してのみ機能します。したがって、position: relative;を#mtitleに追加すると、zインデックスが機能します。

0
Buzilla

あなたの質問の最後の部分に関して、

#mtitleの上にtsubが表示されていますが、その理由はわかりません。

position: absoluteを持つ要素は、要素の通常のフローから「取り出され」、親要素のスペースを占有しません（これを機能させるには、static以外の位置設定が必要です）。 、それらはそれらに固定されているだけです（=それらと一緒に移動します）。しかし、そうすれば、他の要素と重複する可能性があります。

いくつかの絶対的に配置された要素の中で、z-indexはどれが別の要素の上にあるかを決定します。

0
Johannes