From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../adding_z-index/index.html | 149 ++++++++++++++ .../understanding_z_index/index.html | 36 ++++ .../stacking_and_float/index.html | 135 +++++++++++++ .../stacking_context_example_1/index.html | 117 +++++++++++ .../stacking_context_example_2/index.html | 128 +++++++++++++ .../stacking_context_example_3/index.html | 160 ++++++++++++++++ .../stacking_without_z-index/index.html | 122 ++++++++++++ .../the_stacking_context/index.html | 213 +++++++++++++++++++++ 8 files changed, 1060 insertions(+) create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (limited to 'files/fr/web/css/css_positioning') diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..d12e2113d1 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,149 @@ +--- +title: Ajouter z-index +slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
+ +

Ajouter z-index

+ +

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

+ +

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

+ +
+

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

+
+ + + +
+

Notes :

+ + +
+ +

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

+ +

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

+ +

Code source de l’exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..0c6c636886 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,36 @@ +--- +title: Comprendre z-index en CSS +slug: Web/CSS/Comprendre_z-index +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

+ +

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

+ +
+

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

+
+ +

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

+ +

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

+ +

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

+ +

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

+ +
    +
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. +
  2. L'empilement et float : Comportement des éléments flottants
    3. +
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. +
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. +
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. +
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. +
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. +
+ +

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..de0cc3761f --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,135 @@ +--- +title: Empilement et éléments flottants +slug: Web/CSS/Comprendre_z-index/Empilement_et_float +tags: + - Avancé + - CSS + - Contextes d’empilement + - Guide + - Ordre d’empilement + - float + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
+ +

L'empilement et les éléments flottants

+ +

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. +
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. +
+ +

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

+ +

Ce comportement peut être expliqué en améliorant la liste précédente :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. +
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. +
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. +
+ +
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
+ +

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

+ +

Code source de l'exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

Voir aussi

+ + + + + +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..f155461dd4 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,117 @@ +--- +title: Exemple d'empilement 1 +slug: Web/CSS/Comprendre_z-index/Exemple_1 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
+ +

Premier exemple

+ +

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

+ +

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

+ +

Figure 5a : Exemple de contexte d'empilement 1

+ +

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

+ +

Figure 5b : Exemple de contexte d'empilement 1

+ +

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

+ +

Figure 5c : Exemple de contexte d'empilement 1

+ +

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

+ +

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

+ + + +
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+ +

Exemple

+ +

CSS

+ +
.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<div id="div1">
+  <br/>
+  <span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+     <br/>z-index: 1;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <b/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..75bbba62d9 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,128 @@ +--- +title: Exemple d'empilement 2 +slug: Web/CSS/Comprendre_z-index/Exemple_2 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
+ +

Deuxième exemple

+ +

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

+ +

Figure 6 : Exemple de contexte d'empilement 2

+ +

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

+ +

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ + + +
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<br/>
+
+<div id="div1">
+  <br/><span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <br/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <br/>z-index: 1;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 10;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..5530887ec2 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,160 @@ +--- +title: Exemple d'empilement 3 +slug: Web/CSS/Comprendre_z-index/Exemple_3 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
+ +

Troisième exemple

+ +

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

+ +

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

+ +

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

+ +

Figure 7 : Exemple de contexte d'empilement 3

+ +

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

+ +

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

+ +

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ + + +

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

+ +
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}
+ +

HTML

+ +
<br/>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+  <div id="container1">
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+      <div id="container2">
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+      </div>
+    </div>
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+    </div>
+  </div>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..db892c51dc --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,122 @@ +--- +title: Empilement sans z-index +slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
+ +

Empilement sans z-index

+ +

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

+ +
    +
  1. Arrière-plans et bordures de l'élément racine
    2. +
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. +
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. +
+ +

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

+ +

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

+ +
+

Notes :

+ + +
+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Exemple

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","600","400")}}

+ +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..20fa6ab2ce --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,213 @@ +--- +title: L'empilement de couches +slug: Web/CSS/Comprendre_z-index/Empilement_de_couches +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
+ +

Le contexte d'empilement

+ +

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

+ +

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

+ +

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

+ + + +

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

+ +

En bref :

+ + + +
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
+ +

Illustration

+ +

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

+ +

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

+ + + +

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

+ +
+

Notes :

+ + +
+ +

Exemple

+ +

CSS

+ +
* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+
+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","556","396")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
-- cgit v1.2.3-54-g00ecf