Revision 959145 of Stacking context example 2

<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p>

<h3 id="Stacking_context_example_2">Stacking context example 2</h3>

<p>This is a very simple example, but it is the key for understanding the concept of <em>stacking context</em>. There are the same four DIVs of the previous example, but now z-index properties are assigned on both levels of the hierarchy.</p>

<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p>

<p>You can see that DIV #2 (z-index: 2) is above DIV #3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.</p>

<p>What can be considered strange is that DIV #2 (z-index: 2) is above DIV #4 (z-index: 10), despite their z-index values. The reason is that they do not belong to the same stacking context. DIV #4 belongs to the stacking context created by DIV #3, and as explained previously DIV #3 (and all its content) is under DIV #2.</p>

<p>To better understand the situation, this is the stacking context hierarchy:</p>

<ul>
 <li>root stacking context
  <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> It is worth remembering that in general the HTML hierarchy is different from the stacking context hierarchy. In the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent.</div>

<h3 id="Example_source_code"><strong>Example source code</strong></h3>

<pre class="brush: html">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html&gt;
&lt;head&gt;&lt;style type="text/css"&gt;

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;
}


&lt;/style&gt;&lt;/head&gt;

&lt;body&gt;

&nbsp; &nbsp; &lt;br /&gt;

&nbsp; &nbsp; &lt;div id="div1"&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="bold"&gt;DIV #1&lt;/span&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; position: relative;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="div2"&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="bold"&gt;DIV #2&lt;/span&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 2;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;

&nbsp; &nbsp; &lt;br /&gt;

&nbsp; &nbsp; &lt;div id="div3"&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="bold"&gt;DIV #3&lt;/span&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="div4"&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="bold"&gt;DIV #4&lt;/span&gt;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&lt;br /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 10;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="See_also">See also</h3>

<ul>
 <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a>&nbsp;: Default stacking rules</li>
 <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a>&nbsp;: How floating elements are handled</li>
 <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a>&nbsp;: Using z-index to change default stacking</li>
 <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>&nbsp;: Notes on the stacking context</li>
 <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>&nbsp;: 2-level HTML hierarchy, z-index on the last level</li>
 <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>&nbsp;: 3-level HTML hierarchy, z-index on the second level</li>
</ul>

<div class="originaldocinfo">
<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>

<ul>
 <li>Author(s): Paolo Lombardi</li>
 <li>This article is the english translation of an article I wrote in italian for <a class="external" href="https://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="https://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
 <li>Last Updated Date: July 9th, 2005</li>
</ul>
</div>

<p>&nbsp;</p>