web-dev-qa-db-fra.com

Comment faire en sorte qu'un élément parent apparaisse au-dessus de l'enfant

J'ai deux éléments CSS imbriqués. Je dois obtenir que le parent soit au dessus, c'est-à-dire en haut de l'axe des z, de l'élément enfant. Il ne suffit pas de définir z-index.

Je ne peux pas définir d'index-z négatif sur l'enfant, cela le mettra sous le conteneur de page sur ma page réelle. Est-ce la seule méthode?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>
cssz-index
76
Jourkey

Définir un négatif z-index pour l'enfant et supprimez celui défini sur le parent.

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}
<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

71
Alan Haggai Alavi

Heureusement, une solution existe. Vous devez ajouter un wrapper pour le parent et changer l'index z de ce wrapper pour l'exemple 10, et définir l'index z pour l'enfant sur -1:

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}
<div class="wrapper">
    <div class="parent">parent parent
        <div class="child">child child child</div>
    </div>
</div>
50
zielu1

Certaines de ces réponses fonctionnent, mais mettre position: absolute; et z-index: 10; semblait assez fort pour obtenir l’effet recherché. J'ai trouvé ce qui suit était tout ce qui était nécessaire, mais malheureusement, je n'ai pas été en mesure de le réduire davantage.

HTML: 

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS: 

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

J'ai utilisé cette technique pour obtenir un effet de survol pour les liens d’image. Il y a un peu plus de code ici, mais il utilise le concept ci-dessus pour montrer la bordure au-dessus de l'image.

http://jsfiddle.net/g7nP5/

7
TheShrew

C'est craqué. En fait, lorsque vous définissez l'indice z sur une valeur négative, il ignore l'élément parent, qu'il soit positionné ou non, et se place derrière le prochain élément positionné, qui dans votre cas était votre conteneur principal. Par conséquent, vous devez placer votre élément parent dans une autre div positionnée, et votre div enfant s'assiéra derrière cela.

Cela a été une bouée de sauvetage pour moi, car mon élément parent en particulier ne pouvait pas être positionné pour que mon code fonctionne.

J'ai trouvé tout cela extrêmement utile pour obtenir l'effet indiqué ici: tilisation de CSS uniquement, affichage de la division en survol <a>

3
Edd Tillen

Puisque tes divs sont position:absolute, ils ne sont pas vraiment imbriqués en ce qui concerne la position. Sur votre page jsbin, j'ai changé l'ordre des divs dans le code HTML en:

<div class="child"><div class="parent"></div></div>

et la boîte rouge couvrait la boîte bleue, ce qui, je pense, est ce que vous recherchez.

3
carillonator

Vous auriez besoin d'utiliser position:relative ou position:absolute sur le parent et l'enfant à utiliser z-index.

2
Divya Manian