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_sans_z-index/index.html | 122 +++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html (limited to 'files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html') diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html new file mode 100644 index 0000000000..db892c51dc --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_sans_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")}}
-- cgit v1.2.3-54-g00ecf