diff options
Diffstat (limited to 'files/fr/web/css/comprendre_z-index')
8 files changed, 1060 insertions, 0 deletions
diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html new file mode 100644 index 0000000000..d12e2113d1 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/ajout_de_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 +--- +<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2> + +<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>, 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")}}.</p> + +<p>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 <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p> + +<div class="warning"> +<p><strong>Attention :</strong> <code>z-index</code> a un effet sur les éléments uniquement si ceux-ci sont <a href="/fr/docs/Web/CSS/position">positionnés</a>.</p> +</div> + +<ul> + <li><em>Bas : couche la plus lointaine de l'observateur</em></li> + <li>…</li> + <li>Couche -3</li> + <li>Couche -2</li> + <li>Couche -1</li> + <li>Couche 0 <em>couche de rendu par défaut</em></li> + <li>Couche 1</li> + <li>Couche 2</li> + <li>Couche 3</li> + <li>…</li> + <li><em>Haut : couche la plus proche de l'observateur</em></li> +</ul> + +<div class="note"> +<p><strong>Notes :</strong></p> + +<ul> + <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li> + <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li> +</ul> +</div> + +<p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p> + +<p>{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}</p> + +<h2 id="Code_source_de_l’exemple"><strong>Code source de l’exemple</strong></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +} +</pre> + +<p>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</p> 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 +--- +<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2> + +<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> 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 <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p> + +<p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (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 <code>z-index</code> différente de <em>auto</em> 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 <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p> + +<p>Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :</p> + +<ul> + <li>L'élément racine du document (HTML)</li> + <li>Un élément pour lequel {{cssxref("position")}} vaut <code>absolute</code> ou <code>relative</code> et pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li> + <li>Un élément pour lequel {{cssxref("position")}} vaut <code>fixed</code> ou <code>sticky</code></li> + <li>Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li> + <li>Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li> + <li>Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. <a href="https://www.w3.org/TR/css3-color/#transparency">la spécification</a>)</li> + <li>Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de <code>normal</code></li> + <li>Un élément pour lequel n'importe laquelle de ces propriétés est différente de <code>none</code> : + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>Un élément pour lequel {{cssxref("isolation")}} vaut <code>isolate</code></li> + <li>Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut <code>touch</code>.</li> + <li>Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.</li> + <li>Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est <code>layout</code>, <code>paint</code> ou une valeur composite contenant un de ces mots-clés (par exemple <code>contain: strict</code> ou <code>contain: content</code>).</li> +</ul> + +<p>Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des <code>z-index</code> 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.</p> + +<p>En bref :</p> + +<ul> + <li>Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.</li> + <li>Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.</li> + <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li> +</ul> + +<div class="note"><strong>Notes :</strong> 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é <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div> + +<h4 id="Illustration">Illustration</h4> + +<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p> + +<p>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 <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p> + +<ul> + <li>Racine + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, 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 <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p> + +<div class="note"> +<p><strong>Notes :</strong></p> + +<ul> + <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li> + <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li> + <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li> +</ul> +</div> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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 } +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple","556","396")}}</p> + +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html new file mode 100644 index 0000000000..de0cc3761f --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_et_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 +--- +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="L'empilement_et_les_éléments_flottants">L'empilement et les éléments flottants</h2> + +<p>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 :</p> + +<ol> + <li>L'arrière-plan et les bordures de l'élément racine du document</li> + <li>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) ;</li> + <li>Les blocs flottants ;</li> + <li>Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).</li> +</ol> + +<p>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")}}.</p> + +<p>Ce comportement peut être expliqué en améliorant la liste précédente :</p> + +<ol> + <li>L'arrière-plan et les bordures de l'élément racine ;</li> + <li>Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;</li> + <li>Les blocs flottants ;</li> + <li>Les éléments « en-ligne » enfants dans le flux normal ;</li> + <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li> +</ol> + +<div class="note"><strong>Note :</strong> 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 : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div> + +<p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p> + +<h2 id="Code_source_de_l'exemple">Code source de l'exemple</h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h2 id="Voir_aussi"><strong>Voir aussi</strong></h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li> +</ul> + + + +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div> 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 +--- +<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Empilement_sans_z-index">Empilement sans <code>z-index</code></h2> + +<p>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) :</p> + +<ol> + <li>Arrière-plans et bordures de l'élément racine</li> + <li>Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)</li> + <li>Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)</li> +</ol> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Notes :</strong></p> + +<ul> + <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li> + <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li> + <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li> +</ul> +</div> + +<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple","600","400")}}</p> + +<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html new file mode 100644 index 0000000000..f155461dd4 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_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 +--- +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Premier_exemple">Premier exemple</h2> + +<p>Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs <em>DIV</em> (<em>DIV #1</em> et <em>DIV #3</em>), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc <em>DIV #1</em> il y a un bloc <em>DIV #2</em> en position absolue, alors que dans le bloc <em>DIV #3</em> il y a un bloc <em>DIV #4</em> en position absolue, tout deux également sans propriété <code>z-index</code>.</p> + +<p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p> + +<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p> + +<p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p> + +<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p> + +<p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p> + +<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p> + +<p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> 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 <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p> + +<p>Dans le contexte d'empilement, les blocs <em>DIV #1</em> et <em>DIV #3</em> sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :</p> + +<ul> + <li>Contexte d'empilement racine + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> 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 <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div> + +<h2 id="Exemple"><strong>Exemple</strong></h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemple')}}</p> + +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html new file mode 100644 index 0000000000..75bbba62d9 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_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 +--- +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Deuxième_exemple">Deuxième exemple</h2> + +<p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. 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.</p> + +<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p> + +<p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p> + +<p>Ce qui peut apparaitre comme étrange, c'est que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #4</em> (z-index : 10), malgré leurs valeurs de <code>z-index</code>. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc <em>DIV #4</em> appartient au contexte d'empilement créé par le bloc <em>DIV #3</em>, et, comme expliqué précédemment, le bloc <em>DIV #3</em> (et tout son contenu) est au dessous du bloc <em>DIV #2</em>.</p> + +<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p> + +<ul> + <li>Contexte d'empilement racine + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Note :</strong> 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.</div> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple")}}</p> + +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html new file mode 100644 index 0000000000..5530887ec2 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_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 +--- +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div> + +<h2 id="Troisième_exemple">Troisième exemple</h2> + +<p>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.</p> + +<p>Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs <em>DIV</em> 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'<em>id</em>.</p> + +<p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p> + +<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p> + +<p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p> + +<p>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 <code>z-index</code>. 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.</p> + +<p>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 <code>z-index</code> et que les règles d'empilement par défaut s'appliquent.</p> + +<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p> + +<ul> + <li>Contexte d'empilement racine + <ul> + <li>Niveau #1 + <ul> + <li>Niveau #2 (z-index : 1) + <ul> + <li>Niveau #3</li> + <li>…</li> + <li>Niveau #3</li> + </ul> + </li> + <li>Niveau #2 (z-index : 1)</li> + <li>…</li> + <li>Niveau #2 (z-index : 1)</li> + </ul> + </li> + <li>Niveau #1</li> + <li>…</li> + <li>Niveau #1</li> + </ul> + </li> +</ul> + +<p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p> + +<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple")}}</p> + +<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div> diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html new file mode 100644 index 0000000000..0c6c636886 --- /dev/null +++ b/files/fr/web/css/comprendre_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 +--- +<p>{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p> + +<p>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.</p> + +<blockquote> +<p><em>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. </em></p> +</blockquote> + +<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p> + +<p>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")}}.</p> + +<p><code>z-index</code> 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 <code>z-index</code> 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.</p> + +<p>Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.</p> + +<ol> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans <code>z-index</code></a> : Règles d'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float">L'empilement et <code>float</code></a> : Comportement des éléments flottants</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter <code>z-index</code></a> : Utiliser <code>z-index</code> pour modifier l'empilement par défaut</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur le dernier niveau</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur tous les éléments</li> + <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, <code>z-index</code> sur le deuxième niveau</li> +</ol> + +<p>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p> |