Compare Revisions

The stacking context

Change Revisions

Revision 351165:

Revision 351165 by dbruant on

Revision 381293:

Revision 381293 by ethertank on

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

Revision 351165
Revision 381293
n8      « <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/n8      « <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="
>Understanding_z-index" title="Understanding CSS z-index"><span cl>/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z
>ass="title">Understanding CSS z-index</span></a>>-index">Understanding CSS z-index</a>
n14      In the previous example, <a href="/en/CSS/Understanding_z-in14      In the previous example, <a href="/en-US/docs/CSS/Understan
>ndex/Adding_z-index" title="Adding z-index">Adding z-index</a>, t>ding_z-index/Adding_z-index" title="Adding z-index">Adding z-inde
>he rendering order of certain DIVs is influenced by their z-index>x</a>, the rendering order of certain DIVs is influenced by their
> value. This occurs because these DIVs have special properties wh> z-index value. This occurs because these DIVs have special prope
>ich cause them to form a <em>stacking context</em>.>rties which cause them to form a <em>stacking context</em>.
n24      <li>elements with an {{ cssxref("opacity") }} value less thn24      <li>elements with an {{cssxref("opacity")}} value less than
>an 1. (See <a class="external" href="http://www.w3.org/TR/css3-co> 1. (See <a href="http://www.w3.org/TR/css3-color/#transparency" 
>lor/#transparency" title="http://www.w3.org/TR/css3-color/#transp>title="http://www.w3.org/TR/css3-color/#transparency">the specifi
>arency">the specification for opacity</a>),>cation for opacity</a>),
n52      <img alt="Example of stacking rules modified using z-index"n52      <img alt="Example of stacking rules modified using z-index"
> class="internal" src="/@api/deki/files/913/=Understanding_zindex> src="/@api/deki/files/913/=Understanding_zindex_04.png">
>_04.png"> 
n242    <pre class="eval">n242    <pre>
n250      <pre class="eval">n250      <pre>
n260        <pre class="eval">n260        <pre>
n268      <pre class="eval">n268      <pre>
n276        <pre class="eval">n276        <pre>
n285        <pre class="eval">n285        <pre>
n296        <a href="/en/CSS/Understanding_z-index/Stacking_without_zn296        <a href="/en-US/docs/CSS/Understanding_z-index/Stacking_w
>-index" title="en/CSS/Understanding_z-index/Stacking_without_z-in>ithout_z-index" title="CSS/Understanding_z-index/Stacking_without
>dex">Stacking without z-index</a>&nbsp;: Default stacking rules>_z-index">Stacking without z-index</a>&nbsp;: Default stacking ru
 >les
297      </li>
298      <li>297      </li>
298      <li>
299        <a href="/en/CSS/Understanding_z-index/Stacking_and_float299        <a href="/en-US/docs/CSS/Understanding_z-index/Stacking_a
>" title="en/CSS/Understanding_z-index/Stacking_and_float">Stackin>nd_float" title="CSS/Understanding_z-index/Stacking_and_float">St
>g and float</a>&nbsp;: How floating elements are handled>acking and float</a>&nbsp;: How floating elements are handled
300      </li>
301      <li>300      </li>
301      <li>
302        <a href="/en/CSS/Understanding_z-index/Adding_z-index" ti302        <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-i
>tle="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index<>ndex" title="CSS/Understanding_z-index/Adding_z-index">Adding z-i
>/a>&nbsp;: Using z-index to change default stacking>ndex</a>&nbsp;: Using z-index to change default stacking
303      </li>
304      <li>303      </li>
304      <li>
305        <a href="/en/CSS/Understanding_z-index/Stacking_context_e305        <a href="/en-US/docs/CSS/Understanding_z-index/Stacking_c
>xample_1" title="en/CSS/Understanding_z-index/Stacking_context_ex>ontext_example_1" title="CSS/Understanding_z-index/Stacking_conte
>ample_1">Stacking context example 1</a>&nbsp;: 2-level HTML hiera>xt_example_1">Stacking context example 1</a>&nbsp;: 2-level HTML 
>rchy, z-index on the last level>hierarchy, z-index on the last level
306      </li>
307      <li>306      </li>
307      <li>
308        <a href="/en/CSS/Understanding_z-index/Stacking_context_e308        <a href="/en-US/docs/CSS/Understanding_z-index/Stacking_c
>xample_2" title="en/CSS/Understanding_z-index/Stacking_context_ex>ontext_example_2" title="CSS/Understanding_z-index/Stacking_conte
>ample_2">Stacking context example 2</a>&nbsp;: 2-level HTML hiera>xt_example_2">Stacking context example 2</a>&nbsp;: 2-level HTML 
>rchy, z-index on all levels>hierarchy, z-index on all levels
309      </li>
310      <li>309      </li>
310      <li>
311        <a href="/en/CSS/Understanding_z-index/Stacking_context_e311        <a href="/en-US/docs/CSS/Understanding_z-index/Stacking_c
>xample_3" title="en/CSS/Understanding_z-index/Stacking_context_ex>ontext_example_3" title="CSS/Understanding_z-index/Stacking_conte
>ample_3">Stacking context example 3</a>&nbsp;: 3-level HTML hiera>xt_example_3">Stacking context example 3</a>&nbsp;: 3-level HTML 
>rchy, z-index on the second level>hierarchy, z-index on the second level
n321        <li>This article is the english translation of an articlen321        <li>This article is the english translation of an article
> I wrote in italian for <a class="external" href="http://www.yapp> I wrote in italian for <a href="http://www.yappy.it">YappY</a>. 
>y.it">YappY</a>. I grant the right to share all the content under>I grant the right to share all the content under <a href="http://
> <a class="external" href="http://creativecommons.org/licenses/by>creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attrib
>-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>>ution-Sharealike license</a>
t326    </div>t
327    <p>
328      {{ languages( { "fr": "fr/CSS/Comprendre_z-index/L'empileme326    </div><!--languages( { "fr": "fr/CSS/Comprendre_z-index/L'emp
>nt_de_couches" } ) }}>ilement_de_couches" } )-->
329    </p>

Back to History