Aller au contenu


[CSS] z-index et contexte d'empilement


  • Vous ne pouvez pas répondre à ce sujet
2 replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 20 avril 2013 - 09:23

z-index et contexte d'empilement

 

 

La propriété CSS z-index, à laquelle on associe un nombre, est une propriété pratique: elle permet de définir des ordres d'empilements de blocs HTML.
Cependant, elle n'est pas si aisée à comprendre. Je l'ai compris longtemps assez naïvement, faussement du coup, et je pense ne pas être le seul.
Récemment, je me suis attelé à résoudre proprement un problème graphique: une ombre (ou lueur) autour de blocs accolés mais de taille différentes, épousant la forme des blocs dans leur ensemble, sans chevauchement.
Et j'ai pas mal cherché, expérimenté, sans solution, jusqu'à ce que je tombe sur cet article génial: https://developer.mo...prendre_z-index
Et là, j'ai trouvé solution à mon problème - et compris beaucoup de choses qui m'avaient échappé concernant la propriété z-index.
Au fond, j'ai peut-être été trompé par une vérité, disons plutôt: une semi-vérité: "la valeur par défaut du z-index est égale à 0".
C'est vrai, mais à une nuance près, une nuance capitale: définir un z-index, même nul, déclare un contexte d'empilement. Ne pas le définir ne déclare aucun contexte d'empilement. Et dans certains cas, cela change tout.
Le positionnement, et l'absence de positionnement, influent également, plus qu'on ne croit, sur la façon dont les blocs interagissent, y compris ceux qui n'ont pas de z-index.
Le contexte d'empilement: voilà ce que ma naïve vision de départ ne prenait pas en compte, par simple ignorance de la propriété z-index avec assez de précision.
Et le contexte d'empilement, c'est ce que je vous conseille vivement d'aller découvrir, car cela explique beaucoup d'échecs, et ouvre autant de perspectives voire plus.

Vous avez retenu ? Contexte d'empilement. ;)



Source: le bien plus complet et formidable article: https://developer.mo...prendre_z-index

 

 

[...]



#2 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 20 avril 2013 - 09:34

Le code HTML :

Utilisation d'une span mais une autre balise ferait l'affaire (typiquement, un lien). Le code n'est pas remonté d'un cran, de li à ul et de li span à li, car l'ajout d'un deuxième onglet sèmerait la panique. ;-)

<div class="demo">
  <ul>
    <li><span>Quel bel onglet !</span></li>
  </ul>
  <div>
	
  </div>
</div >

Le code CSS :

.demo{
	background: #666; 
	border: solid 1px #333; 
	width: 540px; 
	padding: 20px; 
	margin: 20px auto;}

.demo > div{
	height: 150px; 
	width: 460px; 
	background: white; 
	box-shadow: 0 0 10px orange; 
	color: black; 
	padding: 20px;}

.demo li, .demo li span{
	height: 50px;
	width: 200px; 
	background: white; 
	border-top-right-radius: 10px; 
	border-top-left-radius: 10px;}

.demo li{ box-shadow: 0 0 10px orange;}

.demo li span{
	display: block; 
	line-height: 50px; 
	text-align: center;}

[...]



#3 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 20 avril 2013 - 09:43

La pratique :

  • Quel bel onglet !

Flux normal, sans rien ajouter, l'ombre de la div passe par dessus l'onglet.

  • Quel bel onglet !

Première réaction: on utilise z-index.

.demo li{position: relative;}
.demo > div{position: relative; z-index: 1;}

On sait que ça ne fonctionnera pas, que c'est l'ombre de l'onglet qui va géner... mais on ne peut pas s'empécher d'essayer ^^ !

  • Quel bel onglet !

Ah ah ! Alors on se dit: facile ...

.demo li{position: relative; z-index: 10;}
.demo li span{position: relative; z-index: 30;}
.demo > div{position: relative;z-index: 20;}

Ça ne fonctionne pas ... et ça, c'est une question de contexte d'empilement.

  • Quel bel onglet !

La solution: ne pas mettre de z-index à ul, pour ne pas séparer les contextes d'empilement.

.demo li{position: relative;}
.demo li span{position: relative; z-index: 10;} 
/*pour li span, absolute convent aussi*/
.demo > div{position: relative; z-index: 1;}


Source: le bien plus complet et formidable article: https://developer.mozilla.org/fr/docs/CSS/Comprendre_z-index





1 utilisateur(s) en train de lire ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)