web-dev-qa-db-ja.com

z-indexがposition：staticで無視されるのはなぜですか？

このコメントを参照してください jquery-uiから

_// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned
_

要素が_position: static_の場合、jqueryのzIndex()は0を返すことがわかります。

Z-indexはposition：staticでサポートされていませんか？ （Chromeで動作しますが、クロスブラウザはテストしていません）

jqueryhtmlcssz-index
21
ripper234

position: staticは、「left、top、z-indexなどからのすべての位置決め命令を無視する」ことを意味するためです。

'z-index'
Value:      auto | <integer> | inherit
Initial:    auto
Applies to:     positioned elements

— http://www.w3.org/TR/CSS21/visuren.html#z-index

要素の「position」プロパティの値が「static」以外の場合、要素は配置されていると言われます。

— http://www.w3.org/TR/CSS21/visuren.html#positioned-element

45
Quentin

z-indexは、flex-items（flex-containerの直接の子、display: flexまたはdisplay: inline-flexの要素）またはgrid-items（grid-containerの直接の子、display: gridまたはdisplay: inline-gridの要素）では無視されません。

スペック見積もり

から W3C Flexbox仕様 ：

フレックスアイテム インラインブロックとまったく同じようにペイントします CSS21 ただし、 order -変更されたドキュメントの順序が生のドキュメントの順序の代わりに使用されます。 z-indexauto 以外の値 position が static であっても、スタッキングコンテキストを作成します。

から W3C CSSグリッドレイアウト仕様 ：

グリッドアイテム 交差するように配置されている場合はオーバーラップする可能性があります グリッド領域 、または負のマージンまたは配置のために交差しない領域に配置されている場合でも重複する可能性があります。 グリッドアイテム のペイント順序は、インラインブロック CSS21 とまったく同じですが、生のドキュメントの代わりに 順序が変更されたドキュメントの順序 が使用される点が異なります。順序、および z-index 以外の値 autoposition が static （のように動作する position だった relative ）。したがって、 z-index プロパティを使用して、グリッドアイテムのz軸の順序を簡単に制御できます。

Flexboxの例

したがって、このレイアウトがオーバーラップしていると仮定します（たとえば、負のマージンを使用して.flex-item-twoが.flex-item-oneとオーバーラップします）。

.flex {
  display: flex;
  align-items: center;
}

.flex-item-one {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: -50px;
}

.flex-item-two {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="flex">
  <div class="flex-item flex-item-one">One</div>
  <div class="flex-item flex-item-two">Two</div>
</div>

flex-item-oneインデックスが.flex-item-twoのインデックスよりも大きい場合、.flex-item-oneは.flex-item-twoとオーバーラップします。

.flex {
  display: flex;
  align-items: center;
}

.flex-item-one {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: -50px;
  z-index: 1;
}

.flex-item-two {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="flex">
  <div class="flex-item flex-item-one">One</div>
  <div class="flex-item flex-item-two">Two</div>
</div>

CSSグリッドの例

#grid {
  display: inline-grid;
  width: 250px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

#A {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  background-color: #4f81bd;
}

#B {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  background-color: #8064a2;
}

#C {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-left: -20px;
  background-color: #f79646;
}

#D {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  background-color: #9bbb59;
}

#E {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  z-index: 5;
  justify-self: center;
  align-self: center;
  background-color: #c0504d;
}

#grid > * {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  font-size: 32px;
}

#C, #D {
  padding: 10px 20px;
}
<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>
6
Vadim Ovchinnikov