web-dev-qa-db-fra.com

Comment rendre un élément enfant supérieur à l'indice z supérieur à l'élément parent?

Supposons que j'ai ce code:

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

<div class="wholePage"></div>

Ce jsFiddle: http://jsfiddle.net/ZjXMR/

Maintenant, j'ai besoin d'avoir <div class="child"> en haut de <div class="wholePage"> mais dans le jsFiddle vous pouvez voir que l’élément enfant rendu avant <div class="wholePage">.

Si vous supprimez le parent class position ou z-index, tout fonctionne bien. C’est le comportement correct dont j’ai besoin: http://jsfiddle.net/ZjXMR/1/

Comment puis-je faire cela avec z-index et sans rien enlever de la page?

cssz-index
67
Afshin Mehrabani

C'est impossible en tant qu'enfant z-index est défini sur le même index d'empilement que son parent.

Vous avez déjà résolu le problème en supprimant l'index z du parent, conservez-le ainsi ou faites de l'élément un frère au lieu d'enfant.

55
Kyle

Pour obtenir ce que vous voulez sans supprimer aucun style, vous devez agrandir l'index z de la classe '.parent' puis celui de la classe '.wholePage'.

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle: http://jsfiddle.net/ZjXMR/2/

8
MythThrazz

Donnez le z-index parent: -1, ou l'opacité: 0.99

5
Greg Benner

Rien n'est impossible. Utilise la force.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
4
supermasher

Utilisez une position non statique avec un plus grand indice z dans l'élément enfant:

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}
2
Priyanshu Chauhan

Essayez d'utiliser ce code, cela a fonctionné pour moi:

z-index: unset;
1
Carlos Aleman