Pour cette première astuce, nous allons jouer avec la propriété z-index, elle n'est pas forcément bien comprise par tout le monde, on peut -des fois- se retrouver avec des valeurs un peu rocambolesque (99999999)...
Nous n'avons pas besoin d'arriver à ce genre d'extrémité on peut tout à faire utiliser le z-index de façon simple et maitrisée. Nous allons directement passer à une suite d'exemple :
HTML
Code : Tout sélectionner
<div class="parent parent-A">
<div class="child child-A">.child-A</div>
</div>
<div class="parent parent-B">
<div class="child child-B">.child-B</div>
</div>
<div class="parent parent-C">
<div class="child child-C">.child-C</div>
</div>
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Nous avons 3 objets parent (A, B et C) qui contiennent chacun un enfant du même nom. Chacun de ces éléments enfants ont une hauteur / largeur fixes ainsi qu'une marge interne ainsi qu'une couleur attribuée.
Les éléments B et C ont des propriétés qui n'ont pour l'instant aucun impact.
Admettons que notre élément B ai une marge top négative pour légèrement le remonter ainsi qu'une marge left pour bien visualiser sur la situation
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
}
.child-B {
margin-top: -2em;
margin-felt: 1em;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Notre élément B se retrouve au dessus de l'élément A, pourquoi ? Car quand nous n'avons pas de z-index et les élèments sont donc classés en fonction de leur source (donc B est après A)
Pour que notre élément A se retrouve au dessus, nous serions tenter d'appliquer un z-index
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
}
.child-A {
z-index: 1;
}
.child-B {
margin-top: -2em;
margin-felt: 1em;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Et nous constatons que cela ne fonctionne pas. Donc nous essayons 10, 100 puis 999999999. Et ça ne fonctionne toujours pas. Pourquoi ça ne fonctionne pas ? Tout simplement car pour qu'un z-index soit effectif il faut qu'il ai une position différente de statique, une position relative fera l'affaire
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
}
.child-A {
z-index: 1;
position: relative;
}
.child-B {
margin-top: -2em;
margin-felt: 1em;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Cette fois nous constatons que cette fois, un simple 1 fonctionne
Pour qu'un z-index fonctionne, il faut que l'élément auquel il est appliqué ai un positionnement autre que statique
Cette fois, revenons à notre première situation et ajoutons un positionnement absolu pour tous nos éléments
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Cette fois, nos propriétés des éléments B et C prennent effet et tout cela suit l'ordre de la source (A - B - C)
Si nous voulons faire remonter nos élément A au dessus, nous lui appliquons un z-index
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.child-A {
z-index: 1;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Le z-index est lié à la notion de contexte d'empilement (en anglais stacking context)
Les contextes d'empilements se créent dans un certain nombre de circonstances, mais surtout ils se créent quand un élément avec un positionnement autre que statique et un z-index autre que auto
Quand ça se produit, l'élément devient un nouveau contexte d'empilement et tout ses enfants vont interagir sur l'axe Z, entre eux, mais jamais hors de contexte d'empilement
Autrement dit, lorsque vous avez 2 contexte d'empilement, les enfants de chaque contexte ne peuvent pas interagir les uns les autres
Mettons cela en application :
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.parent {
position: relative;
z-index: 1;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
On ne le voit pas à l'écran mais nous avons cette fois bien 3 contextes d'empilements différents (parent A, parent B et parent C)
Maintenant, si on veut que A apparaisse au dessus de B et qu'on refait ce qui a été fait précédemment :
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.parent {
position: relative;
z-index: 1;
}
.child-A {
z-index: 2;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Rien ne se passe. Maintenant que parent A est un nouveau contexte d'empilement, l'enfant A ne peut pas s'en échapper
Autrement dit, la valeur de z-index de child-A aurait des effets uniquement si il y avait d'autres enfant au sein de parent-A
Il n'y a aucun moyen pour child-A de passer au dessus de child-B grâce à la propriété z-index, tout simplement car child-A et child-B sont dans 2 contextes d'empilement différents
Autrement dit, si on veut en fait en sorte que l'élément child-A passe au dessus de child-B, ce n'est pas la propriété z-index de child-A qu'il va falloir modifier mais celle de parent-A
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.parent {
position: relative;
z-index: 1;
}
.parent-A {
z-index: 2;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
A ce niveau là, le contexte d'empilement de parent-A se trouve au dessus de parent-B
Un dernier point à comprendre : un positionnement autre que statique et un z-index autre que auto, ne sont pas les seuls critères qui peuvent déclencher un nouveau contexte d'empilement, il y en a plein d'autres, notamment une valeur d'opacité inférieur à 1
CSS
Code : Tout sélectionner
.child {
widht: 5em;
height: 5em;
padding: 1em;
position: absolute;
}
.parent {
position: relative;
opacity: 0.99;
}
.parent-A {
z-index: 2;
}
.child-B {
top: 4em;
left: 4em;
}
.child-C {
top: 7em;
left: 7em;
}
.child-A { background: tomato; }
.child-A { background: deepskyblue; }
.child-A { background: gold; }
body {
padding: 1em;
{
Le fait d'avoir une opacité différente de 1 créer un nouveau contexte d'empilement
Il faut donc savoir que l'opacité joue sur les contextes d'empilement, de même que les filtres css type blur etc, les régions CSS également
Astuce N°2
je ferais les autres astuces plus tard cordialement
