Stacking Context : position static « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. position static

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>








Related examples in the same category

1.static position and relative position
2.Using Static Positioning
3.width:auto stretches a static block
4.setting width to a value, margin-left to auto, and margin-right to auto centers a static block
5.Static Positioned
6.use position:static to unposition an element so that it is rendered normally in the flow.
7.Elements flow automatically one after the other in lines and blocks
8.Stretched Absolute
9.Sized Static Block left offset
10.Stretched Static Block left offset
11.Sized Static Block centered aligned
12.Stretched Static Block center aligned