C’est une règle en CSS que beaucoup de designers connaissent, mais la première fois qu’on s’y frotte on se sent très con: on ne peut pas appliquer z-index à un élément dont le parent possède déjà un “stacking context”.
Ce n’est pas un bug, c’est comme ça que c’est supposé fonctionner.
Qu’est-ce qu’un “stacking context” ?
On appelle “stacking context” l’état d’un élément que le navigateur garde en mémoire pour effectuer le rendu de cet élément dans la page. Le “stacking context” dit si l’élément doit être devant ou derrière chaque autre élément se superposant à l’écran avec lui.
Chaque fois que vous utilisez une propriété comme z-index, opacity ou transform sur un élément dans un fichier CSS, le navigateur recalcule le “stacking context” pour savoir si il met maintenant cet élément devant ou derrière les autres à la même position que lui.
Et du coup, j’ai pas compris le début, c’est quoi déjà le problème ?
Si vous faites un truc qui change le “stacking context” d’un élément, vous ne pouvez appliquer z-index sur aucun de ses enfants.
Ainsi si vous avez un HTML comme ça:
<p class="parent">
<span class="child">Truc</span>
</p> |
Et que vous faites ça dans votre CSS:
.parent { z-index: 1; opacity: 0.5; transform: rotate(5deg); } .child { z-index: -1; } |
La dernière règle n’aura aucun effet.
Donc si vous vous acharnez sur F5 parce qu’un z-index semble ne pas marcher quelque part, vous savez maintenant qu’il faut juste remonter la chaîne de tous les parents de cet élément pour voir si vous avez pas à un moment changé le “stacking context” de l’un d’entre eux.
Moi je préfère le viol de toutes conventions établies a coup de “!important”
Si toutes mes règles sont importantes, je me sens important.
Vive le CSS
C’est très clair en effet… et finalement très logique ^^
@anon: +1
Toujours bon à savoir o/
Dans l’exemple la règle n’aura aucun effet parce que
z-indexn’agit que sur les éléments positionnés (dont la propriétépositionvaut autre chose questatic).Et sur un élément positionné,
z-indexest relatif à la pile établie par le premier parent positionné : http://www.w3.org/TR/CSS2/visuren.html#z-indexDonc si,
z-indexa un effet même sur un élément dont le parent a aussi unz-index.Ok mon exemple est tout pourri. Celui-ci est mieux foutu: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
Ah en fait ce que vous voulez mettre en avant c’est le fait que
z-indexn’a d’effet sur l’élément que dans la pile à laquelle il appartient (sauf exception !) ?Honnêtement je n’ai pas compris ça en lisant l’article =/
Ouai, on sent que mon expertise est bien moindre en front end, mes articles sont beaucoup plus approximatif. Bah, c’est pas grâve, y toujours quelqu’un pour donner tous les détails en comment.
@MatTheCat +0.5
Si ton .child est en position:relative (ou
absolute,fixed), alors ça marche (suffit de tester avec desbackgroundsemi-transparents).Tout dépend : si .child et .parent ont chacun des
position:relative, alors là le .child ne pourra pas se placer sous le .parent.Donc en gros, si le .parent a un
position:relative, alors lez-indexdu .child n’a d’effets que sur les autres .child (donc les éléments frères et sœurs, si vous voulez).C’est bien ça, si la pile possède un
positiondifférent destatic.Merci pour ces compléments d’information à tous les deux. C’est très utile.
En fait c’est un sacre bordel et j’y vais aussi de mon lien, qui m’avait aide a mieux comprendre (mais en anglais):
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
j’ais un probleme a “menu” il se desparetre avent que je pass au lien suivent pouver vous m’ide slvp
HTML:
<
div id=”menu”>
accueil
…….FELIER……….
Infirmier polyvalent
ortho
sage femme
assestant sociale
Lien menu 3
lien sous menu 3
lien sous menu 3
lien sous menu 3
lien sous menu 3
Lien menu 4
Lien sous menu 4
Lien sous menu 4
Lien sous menu 4
Lien sous menu 4
css: #menu {
border-radius: 5px 5px 0 0;
bottom: 0px;
position:absolute ;
width: 90%;
}
#menu-demo2,#menu-demo2 ul{
padding:0;
margin:0px;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:5px;
}
#menu-demo2 ul li:hover{border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .3s all .3s;
-webkit-transition: .3s all .3s;
transition: .3s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href style d'ecriture*/
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
z-index:0;
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}
Ceci est un blog sur Python, pas un forum d’aide au HTML.