Compare Revisions

The stacking context

Change Revisions

Revision 46801:

Revision 46801 by Maian on

Revision 46802:

Revision 46802 by Patrick Garies 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 46801
Revision 46802
n82      <b>Example source code</b>n82      <b>Example Source Code</b>
nn85&lt;?xml version="1.0" encoding="utf-8"?&gt;
85&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"86&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
86"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;87  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
87&lt;html&gt;88 
89&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
90  &lt;head&gt;
91 
92    &lt;title&gt;Understanding CSS z-index: The Stacking Context:
 > Example Source&lt;/title&gt;
93 
88&lt;head&gt;&lt;style type="text/css"&gt;94    &lt;style type="text/css"&gt;
89 95      * {
90div {96        margin: 0;
97        }
98      html {
99        padding: 20px;
100        font: 12px/20px Arial, sans-serif;
101        }
102      div {
91   opacity: 0.7;103        opacity: 0.7;
92   font: 12px Arial;
93}
94 
95span.bold { font-weight: bold; }
96 
97#div1 { z-index: 5; }
98#div2 { z-index: 2; }
99#div3 { z-index: 4; }
100#div4 { z-index: 6; }
101#div5 { z-index: 1; }
102#div6 { z-index: 3; }
103 
104#div1,#div2 {
105   height: 100px;
106   position: relative;104        position: relative;
105        }
106      h1 {
107        font: inherit;
108        font-weight: bold;
109        }
110      #div1, #div2 {
107   border: 1px dashed #669966;111        border: 1px dashed #696;
112        padding: 10px;
108   background-color: #ccffcc;113        background-color: #cfc;
109   padding-left: 5px;114        }
110}115      #div1 {
111 116        z-index: 5;
112#div3 {117        margin-bottom: 190px;
118        }
119      #div2 {
120        z-index: 2;
121        }
122      #div3 {
123        z-index: 4;
113   opacity: 1;124        opacity: 1;
114   position: absolute;125        position: absolute;
115   width: 300px;
116   height: 350px;
117   top: 40px;126        top: 40px;
118   left: 120px;127        left: 180px;
128        width: 330px;
119   border: 1px dashed #990000;129        border: 1px dashed #900;
120   background-color: #ffdddd;130        background-color: #fdd;
121   text-align: left;
122   padding: 0px 10px 0px 10px;131        padding: 40px 20px 20px;
123}132        }
124 
125#div4,#div5 {133      #div4, #div5 {
126   height: 100px;
127   position: relative;
128   border: 1px dashed #999966;134        border: 1px dashed #996;
129   background-color: #ffffcc;135        background-color: #ffc;
130   text-align: left;136        }
131   padding-left: 5px;137      #div4 {
132}138        z-index: 6;
133 139        margin-bottom: 15px;
134#div6 {140        padding: 25px 10px 5px;
141        }
142      #div5 {
143        z-index: 1;
144        margin-top: 15px;
145        padding: 5px 10px;
146        }
147      #div6 {
148        z-index: 3;
135   position: absolute;149        position: absolute;
150        top: 20px;
151        left: 180px;
136   width: 150px;152        width: 150px;
137   height: 240px;153        height: 125px;
138   top: 70px;
139   left: 120px;
140   border: 1px dashed #000099;154        border: 1px dashed #009;
155        padding-top: 125px;
141   background-color: #ddddff;156        background-color: #ddf;
142   text-align: center;157        text-align: center;
143}158        }
159    &lt;/style&gt;
n145 n161  &lt;/head&gt;
146&lt;/style&gt;&lt;/head&gt;
147 
148&lt;body&gt;162  &lt;body&gt;
n150&lt;br /&gt;n
151 
152&lt;div id="div1"&gt;
153&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
154&lt;br /&gt;position: relative;
155&lt;br /&gt;z-index: 5;
156&lt;/div&gt;
157 
158&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; 
159 
160&lt;div id="div2"&gt;
161&lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
162&lt;br /&gt;position: relative;
163&lt;br /&gt;z-index: 2;
164&lt;/div&gt;
165 
166&lt;div id="div3"&gt;
167&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
168 
169   &lt;div id="div4"&gt;164    &lt;div id="div1"&gt;
170   &lt;br /&gt;&lt;br /&gt;165      &lt;h1&gt;Division Element #1&lt;/h1&gt;
171   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;166      &lt;code&gt;position: relative;&lt;br/&gt;
172   &lt;br /&gt;position: relative;167      z-index: 5;&lt;/code&gt;
173   &lt;br /&gt;z-index: 6;
174   &lt;/div&gt;168    &lt;/div&gt;
n176   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;n170    &lt;div id="div2"&gt;
177   &lt;br /&gt;position: absolute;171      &lt;h1&gt;Division Element #2&lt;/h1&gt;
178   &lt;br /&gt;z-index: 4;172      &lt;code&gt;position: relative;&lt;br/&gt;
179   &lt;br /&gt;&lt;br /&gt;173      z-index: 2;&lt;/code&gt;
174    &lt;/div&gt;
175 
176    &lt;div id="div3"&gt;
177 
178      &lt;div id="div4"&gt;
179        &lt;h1&gt;Division Element #4&lt;/h1&gt;
180        &lt;code&gt;position: relative;&lt;br/&gt;
181        z-index: 6;&lt;/code&gt;
182      &lt;/div&gt;
183 
184      &lt;h1&gt;Division Element #3&lt;/h1&gt;
185      &lt;code&gt;position: absolute;&lt;br/&gt;
186      z-index: 4;&lt;/code&gt;
187 
188      &lt;div id="div5"&gt;
189        &lt;h1&gt;Division Element #5&lt;/h1&gt;
190        &lt;code&gt;position: relative;&lt;br/&gt;
191        z-index: 1;&lt;/code&gt;
192      &lt;/div&gt;
t181   &lt;div id="div5"&gt;t194      &lt;div id="div6"&gt;
182   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;195        &lt;h1&gt;Division Element #6&lt;/h1&gt;
183   &lt;br /&gt;position: relative;196        &lt;code&gt;position: absolute;&lt;br/&gt;
184   &lt;br /&gt;z-index: 1;197        z-index: 3;&lt;/code&gt;
198      &lt;/div&gt;
199 
185   &lt;/div&gt;200    &lt;/div&gt;
186   201 
187   &lt;div id="div6"&gt;
188   &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&l
>t;br /&gt; 
189   &lt;br /&gt;&lt;span class="bold"&gt;DIV #6&lt;/span&gt;
190   &lt;br /&gt;position: absolute;
191   &lt;br /&gt;z-index: 3;
192   &lt;/div&gt;202  &lt;/body&gt;
193 203&lt;/html&gt;
194&lt;/div&gt;
195&lt;/body&gt;&lt;/html&gt;

Back to History