web-dev-qa-db-fra.com

Pourquoi le débordement interagit-il avec z-index?

J'essaie de comprendre les règles derrière z-index et comment il interagit avec la propriété de débordement.

J'ai ce html:

<body>
  <div class="cell">
    Here is some text to keep things interesting
    <div class="boxy"></div>
  </div>
</body>

Et ce css:

.boxy {
  position: absolute;
  z-index: 9999;
  top:70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  position: relative;

  /* comment these two lines out and the box appears */
  /* or change them both to 'visible' */
  /* changing only one of them to 'visible' does not work */
  overflow-y: auto;
  overflow-x: auto;
}

Je m'attendais à ce que la boîte cyan apparaisse même si elle est hors de la taille du div.cell car son z-index et sa position sont définis.

Cependant, la seule façon de faire apparaître la boîte cyan est de commenter les lignes de débordement-x et -y.

Ma question est: comment faire apparaître la boîte cyan à l'écran tout en gardant le débordement caché ou automatique? Mais plus important encore, je cherche à comprendre pourquoi cela se produit. Quelles sont les règles CSS et de mise en page appliquées ici?

Voir mon Plunkr. Cet exemple est bien sûr une version très simplifiée du HTML/CSS avec lequel je travaille actuellement.

[~ # ~] modifier [~ # ~] Il semble y avoir une certaine confusion dans les réponses ci-dessous car je n'ai pas expliqué les choses assez bien. Si vous commentez les deux lignes de débordement, vous pouvez voir que la boîte cyan apparaît. Il apparaît en dehors de la frontière de .cell. Pourquoi cela arrive-t-il? Comment puis-je faire apparaître la boîte cyan tout en masquant le débordement et le z-index?

cssoverflowz-index
14
Andrew Eisenberg

La raison pour laquelle la boîte cyan apparaît uniquement lorsque overflow-x et overflow-y sont visibles, et disparaissent autrement, c'est simplement parce que la boîte cyan déborde de la boîte de cellule. overflow: visible signifie simplement "Peindre cette boîte même si elle déborde de son bloc conteneur" - la cellule est le bloc conteneur de la boîte cyan car son position est relatif. Toute autre valeur de overflow entraîne la suppression du contenu débordant de la vue. Il n'y a rien de spécial ici; en particulier, le z-index est complètement hors de propos et il n'y a pas d'interaction telle que le titre de la question fait allusion (et il n'y a vraiment aucune raison de le définir à un si grand nombre à moins que vous ne vous inquiétiez des scripts injectant d'autres éléments dans la cellule ).

La seule façon de permettre à la boîte cyan d'apparaître alors que la cellule a un débordement non visible est de supprimer position: relative à partir de la cellule et appliquez cette déclaration au parent de la cellule (dans votre exemple, c'est le corps). Comme ça:

body {
  position: relative;
}

.boxy {
  position: absolute;
  z-index: 9999;
  top: 70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  overflow: auto;
}
<div class="cell">
  Here is some text to keep things interesting
  <div class="boxy"></div>
</div>
11
BoltClock

Les éléments en position absolue ne contribuent pas aux dimensions de leurs parents.

Par conséquent, la .cell DIV n'a aucun contenu qui affecte ses dimensions, ce qui le rend 100% large par 0 px de haut.

Pour faire apparaître l'élément, vous devrez ajouter une hauteur à .cell qui englobera le DIV, dans ce cas 120px (70px top + 50px height).

4
Rick Hitchcock

La classe parent cellule doit être définie comme sa hauteur. parce que la hauteur de l'élément absolute ne l'affecte pas; s parent.

 .boxy {
      position: absolute;
      z-index: 9999;
      top:70px;
      width: 50px;
      height: 50px;
      background: #0FF;

    }

    .cell {
      border: 2px solid #F00;
      position: relative;

      /* comment these two lines out and the box appears */
      /* or change them both to 'visible' */
      /* changing only one of them to 'visible' does not work */
      overflow-y: auto;
      overflow-x: auto;
      min-height: 120px; /* height 70px(Top)+50px*/
    }
2
Gautam Jha

Votre problème

Votre problème est lié au nœud cell qui masque boxy lorsque overflow est spécifié sur le nœud cell.

La raison

La raison en est que boxy avec la position absolue ne contribue pas à height de cell et overflow le cache.

Pourquoi est-il affiché sans débordement?

Par défaut overflow est visible, ce qui signifie que pour le navigateur ne fait rien de spécial pour la fonctionnalité de débordement et il ne le fait pas besoin de rendre le débordement => ne masque pas boxy.

1
gevorg