Compare Revisions

The stacking context

Change Revisions

Revision 46797:

Revision 46797 by Lombardp on

Revision 46798:

Revision 46798 by Rod Whiteley on

Title:
The stacking context
The stacking context
Slug:
CSS/Understanding_z-index/The_stacking_context
CSS/Understanding_z-index/The_stacking_context
Tags:
css, Understanding_CSS_z-index
css, Understanding_CSS_z-index
Content:

Revision 46797
Revision 46798
n11      In the previous example, <i>Adding z-index</i>, DIVs are ren11      In the previous example, <i>Adding z-index</i>, DIVs are re
>ndered one after the other (back to front), from the one with the>ndered one above the other (back to front), from the one with the
> lower z-index to the one with the higher z-index. The context, w> lowest z-index to the one with the highest z-index. In that exam
>here HTML elements are stacked in, is called <b>stacking context<>ple there is only one <i>stacking context</i>, which is the root 
>/b>. In that example there is only one stacking context, the root>HTML element of the page.
> HTML element of the page. 
12    </p>
13    <p>12    </p>
14      On certain conditions, a child stacking context can be crea13    <p>
>ted within a DIV (or another HTML element) contained in the root  
>or in any other element. In particular an HTML element that is po 
>sitioned (absolutely or relatively) and has a z-index value diffe 
>rent from 0 (or auto), creates its own stacking context. It means 
> that all descendant elements are stacked within the parent eleme 
>nt following the same rules previously explained. It is important 
> to say that each stacking context is atomic and independent from 
> the parent's stacking context. It means that z-index values of e 
>lements contained in the child stacking context are valid only in 
> that context, and once rendered, the whole element is atomically 
> stacked in the parent stacking context. 
14      Under certain conditions, a child stacking context can be c
 >reated within a DIV (or in another HTML element) anywhere in the 
 >document. In particular, an HTML element that is positioned (abso
 >lutely or relatively) and has a z-index value that is nonzero (or
 > auto), creates its own stacking context: All its descendant elem
 >ents are stacked within the parent element following the same rul
 >es previously explained. It is important to say that each stackin
 >g context is atomic and independent from the parent's stacking co
 >ntext. z-index values of elements contained in the child stacking
 > context are valid only in that context. Once rendered, the whole
 > element is atomically stacked in the parent stacking context.
n20      <li>Positioning and assigning a z-index value to an HTML eln20      <li>Positioning and assigning a z-index value to an HTML el
>ement, creates a stacking context.>ement creates a stacking context.
n22      <li>Stacking contexts can be contained in other stacking con22      <li>Stacking contexts can be contained in other stacking co
>ntexts, and together create an hierarchy of stacking contexts.>ntexts, and together create a hierarchy of stacking contexts.
n33      <li>The hierarchy of stacking contexts is a subset of the hn33      <li>The hierarchy of stacking contexts is a subset of the h
>ierarchy of HTML elements, because only positioned and z-index as>ierarchy of HTML elements, because only positioned and z-indexed 
>signed elements create one. We can say that elements taht do not >elements create stacking contexts. We can say that elements that 
>create a stacking context are <i>assimilated</i> by the parent st>do not create their own stacking contexts are <i>assimilated</i> 
>acking context.>by the parent stacking context.
n44      In this example every positioned element creates its own stn44      In this example every positioned element creates its own st
>acking context, because of the positioning and z-index value. The>acking context, because of their positioning and z-index values
> hierarchy of stacking context is organized as follows:>The hierarchy of stacking contexts is organized as follows:
n67      It is important to highlight that DIV #4, DIV #5 and DIV #6n67      It is important to note that DIV #4, DIV #5 and DIV #6 are 
> are children of DIV #3, so stacking of those elements is complet>children of DIV #3, so stacking of those elements is completly re
>ly resolved within DIV#3. Once stacking and rendering within DIV >solved within DIV#3. Once stacking and rendering within DIV #3 is
>#3 is completed, the whole DIV #3 element is passed to stacking i> completed, the whole DIV #3 element is passed for stacking in th
>n the root element with respect to its siblings DIV.>e root element with respect to its sibling's DIV.
n73      <li>DIV #4 is rendered under DIV #1 because z-index=5 of DIn73      <li>DIV #4 is rendered under DIV #1 because DIV #1's z-inde
>V #1 is valid within the stacking context of the root element, wh>x (5) is valid within the stacking context of the root element, w
>ile z-index 6 of DIV #4 is valid within the stacking context of D>hile DIV #4's z-index (6) is valid within the stacking context of
>IV #3. So, DIV #4 is under DIV #1, because DIV #4 belogns to DIV > DIV #3. So, DIV #4 is under DIV #1, because DIV #4 belogns to DI
>#3, which has a lower z-index value.>V #3, which has a lower z-index value.
t77      <li>DIV #3 has a z-index=4, but this value is independent ft77      <li>DIV #3's z-index is 4, but this value is independent fr
>rom z-index of DIV #4, DIV #5 and DIV #6, because it belongs to a>om z-index of DIV #4, DIV #5 and DIV #6, because it belongs to a 
> different stacking context.>different stacking context.

Back to History