web-dev-qa-db-fra.com

L'index Z ne fonctionne pas avec les éléments flexibles?

J'essaie d'avoir deux colonnes, l'une étant un menu qui peut développer et chevaucher l'autre colonne. Mais j'ai utilisé un élément flex pour encapsuler ces colonnes et mon menu se développe derrière l'autre élément, même avec un plus grand z-index.

Le rendu est quelque chose comme ceci:

.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>

Voir? Je souhaite que mon menu chevauche le reste de ma page lors de l'expansion. Comment puis je faire ça?

csscss3flexboxz-indexoverlap
9
F. Morival

Les articles Flex ne sont que des enfants directs du conteneur Flex.

Les éléments flexibles respectent z-index commande, mais vous appliquez z-index pas aux éléments flexibles mais à leurs descendants.

De w3c flexbox spec :

éléments Flex Peindre exactement de la même manière que les blocs en ligne CSS21 , sauf que order - l'ordre des documents modifié est utilisé à la place de raw l'ordre des documents et z-index valeurs autres que auto créer un contexte d'empilement même si position est static .

Donc, pour que cela fonctionne, vous devez appliquer une plus grande z-index à votre premier article flexible. Démo:

.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

Le z-index La propriété n'effectue que les éléments qui ont une valeur de position autre que statique (par défaut) ou qui sont des éléments flexibles (enfants directs de display: flex ou display: inline-flex).

Il existe deux options pour rendre le z-index travaillez dans votre cas:

  1. Met le z-index au 1er .maincolumn, qui est un élément 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>

o

  1. Ensemble 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