Stacking Context
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .stacking-context1 {
z-index: 2;
position: absolute;
left: 10px;
top: 70px;
background: red;
}
* .stacking-context2 {
z-index: 1;
position: absolute;
left: 223px;
top: 120px;
background: gold;
}
* .level2 {
z-index: -999;
position: absolute;
background: blue;
}
* .level3 {
position: static;
background: yellow;
}
* .level4 {
float: left;
background: black;
}
* .level5 {
position: static;
background: pink;
}
* .level6 {
z-index: 0;
position: relative;
background: gray;
}
* .level7 {
z-index: 999;
position: absolute;
background: gold;
}
</style>
</head>
<body>
<div class="stacking-context1 box">
<div class="caption"> Background and Borders of Stacking Context #1 <code>z-index:2</code></div>
<span class="level2 box">Absolute <code>z-index:-999</code></span>
<div class="level3 box">Static Block<br />
<span class="level4 box">Static Float</span>
<span class="level5 box">Static Span</span><br /><p class="clear"></p>
<span class="level6 box">Relative Span <code>z-index:0</code></span>
<span class="level7 box">Absolute <code>z-index:999</code></span>
</div>
</div>
<div class="stacking-context2 box">this is a test. this is a test. </div>
</body>
</html>
|
|
|
|
|
HTML code for linking to this page:
Related in same category :
-
-
-
-
-
-
-
-
-
-
-
-
|
