web-dev-qa-db-ja.com

Z-indexはflex要素では動作しませんか？

私は2つの列を作成しようとしています。1つは他の列を展開して重ねることができるメニューです。しかし、フレックス要素を使用してこれらの列をラップすると、メニューが展開されますbehind他の要素、さらに大きいz-index。

レンダリングは次のようなものです。

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
  z-index: 1;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}
<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Title</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

見る？展開するときに、メニューをページの残りの部分と重複させたい。どうやってやるの？

csscss3flexboxz-indexoverlap
9
F. Morival

フレックスアイテムは、フレックスコンテナの直接の子のみです。

フレックスアイテムはz-index順序を尊重しますが、フレックスアイテムではなく、その子孫にz-indexを適用しています。

w3c flexbox spec ：

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

そのため、これを機能させるには、最初のフレックスアイテムにより大きなz-indexを適用する必要があります。デモ：

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

.maincolumn:first-child {
  z-index: 1;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}
<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Title</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>
9
Vadim Ovchinnikov

z-indexプロパティは、静的（デフォルト）以外の位置の値を持つ要素、またはflexアイテム（display: flexまたはdisplay: inline-flexの直接の子）のみに影響します。

z-indexをケースで機能させるには、2つのオプションがあります。

  1. z-indexを最初の.maincolumnに設定します。これはflexboxアイテムです：

    .maincolumn:first-child {
  z-index: 1;
}

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

.maincolumn:first-child {
  z-index: 1;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}
<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Titre</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

または

  1. position: relativeをnavに設定します。

    nav {
   position: relative;
   height: 100%;
   width: 8em;
   background-color: black;
   z-index: 1;
 }

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

nav {
  position: relative;
  height: 100%;
  width: 8em;
  background-color: black;
  z-index: 1;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}
<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Titre</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>
6
Ori Drori