From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../empilement_de_couches/index.html | 213 +++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html (limited to 'files/fr/web/css/comprendre_z-index/empilement_de_couches') diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html new file mode 100644 index 0000000000..20fa6ab2ce --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_de_couches/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