Compare Revisions

The stacking context

Change Revisions

Revision 46794:

Revision 46794 by Lombardp on

Revision 46795:

Revision 46795 by Lombardp 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 46794
Revision 46795
n40      <br>n40      <b>The example</b>
n43      <img alt="Example of stacking rules modified using z-index"n43      <img alt="Example of stacking rules modified using z-index"
> src="File:en/Media_Gallery/Understanding_zindex_03.png">> src="File:en/Media_Gallery/Understanding_zindex_04.png">
nn45    <p>
46      In this example every positioned element creates its own st
 >acking context, because of the positioning and z-index value. The
 > hierarchy of stacking context is organized as follows:
47    </p>
48    <ul>
49      <li>Root
50        <ul>
51          <li>DIV #1
52          </li>
53          <li>DIV #2
54          </li>
55          <li>DIV #3
56            <ul>
57              <li>DIV #4
58              </li>
59              <li>DIV #5
60              </li>
61              <li>DIV #6
62              </li>
63            </ul>
64          </li>
65        </ul>
66      </li>
67    </ul>
tt74&lt;html&gt;
75&lt;head&gt;&lt;style type="text/css"&gt;
76 
77div {
78   opacity: 0.7;
79   font: 12px Arial;
80}
81 
82span.bold { font-weight: bold; }
83 
84#div1 { z-index: 5; }
85#div2 { z-index: 2; }
86#div3 { z-index: 4; }
87#div4 { z-index: 6; }
88#div5 { z-index: 1; }
89#div6 { z-index: 3; }
90 
91#div1,#div2 {
92   height: 100px;
93   position: relative;
94   border: 1px dashed #669966;
95   background-color: #ccffcc;
96   padding-left: 5px;
97}
98 
99#div3 {
100   opacity: 1;
101   position: absolute;
102   width: 300px;
103   height: 350px;
104   top: 40px;
105   left: 120px;
106   border: 1px dashed #990000;
107   background-color: #ffdddd;
108   text-align: left;
109   padding: 0px 10px 0px 10px;
110}
111 
112#div4,#div5 {
113   height: 100px;
114   position: relative;
115   border: 1px dashed #999966;
116   background-color: #ffffcc;
117   text-align: left;
118   padding-left: 5px;
119}
120 
121#div6 {
122   position: absolute;
123   width: 150px;
124   height: 240px;
125   top: 70px;
126   left: 120px;
127   border: 1px dashed #000099;
128   background-color: #ddddff;
129   text-align: center;
130}
131 
132 
133&lt;/style&gt;&lt;/head&gt;
134 
135&lt;body&gt;
136 
137&lt;br /&gt;
138 
139&lt;div id="div1"&gt;
140&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
141&lt;br /&gt;position: relative;
142&lt;br /&gt;z-index: 5;
143&lt;/div&gt;
144 
145&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;b
 >r /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
146 
147&lt;div id="div2"&gt;
148&lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
149&lt;br /&gt;position: relative;
150&lt;br /&gt;z-index: 2;
151&lt;/div&gt;
152 
153&lt;div id="div3"&gt;
154&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
155 
156   &lt;div id="div4"&gt;
157   &lt;br /&gt;&lt;br /&gt;
158   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
159   &lt;br /&gt;position: relative;
160   &lt;br /&gt;z-index: 6;
161   &lt;/div&gt;
162 
163   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
164   &lt;br /&gt;position: absolute;
165   &lt;br /&gt;z-index: 4;
166   &lt;br /&gt;&lt;br /&gt;
167   
168   &lt;div id="div5"&gt;
169   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
170   &lt;br /&gt;position: relative;
171   &lt;br /&gt;z-index: 1;
172   &lt;/div&gt;
173   
174   &lt;div id="div6"&gt;
175   &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&l
 >t;br /&gt;
176   &lt;br /&gt;&lt;span class="bold"&gt;DIV #6&lt;/span&gt;
177   &lt;br /&gt;position: absolute;
178   &lt;br /&gt;z-index: 3;
179   &lt;/div&gt;
180 
181&lt;/div&gt;
182&lt;/body&gt;&lt;/html&gt;

Back to History