CSS for abs-6

  <script>
     html  { margin: 0; padding: 0; background-color: red; }  # 0,0,0,1
     body  { margin: 5px; background-color: gray; }  # 0,0,0,1
     #container  { position: relative; background-color: yellow; border: 2px solid lightgreen; }  # 0,1,0,0
     .abs  { position: absolute; background-color: transparent; border: 2px black dashed; margin: 0; padding: 0; }  # 0,0,1,0
     p  { border: 1px grey dotted; }  # 0,0,0,1
  </script>
  

Page Content

<h3 style="background-color: blue;">Absolute Positioning</h3>
<div id="container" style="z-index: 0;"> <!-- container -->
 <div class="abs" style="width: 250px"> <!-- absolute 1 -->
				<p style="background: green;">
				This is statically positioned paragraph within an absolutely positioned
div which is within a relatively positioned div [acting as a container]
which will give us something
				to look at as we start to explore absolute positioning.
				</p>
				<p style="background: brown;">
				This is statically positioned paragraph within an absolutely positioned
div which is within a relatively positioned div [acting as a container]
which will give us something
				to look at as we start to explore absolute positioning.
				</p>
 </div> <!-- end of absolute 1 -->
 <div class="abs" style="left: 300px"> <!-- absolute 2 -->
				<p style="background: yellow;">
				This is statically positioned paragraph within an absolutely positioned
div which is within a relatively positioned div [acting as a container]
which will give us something
				to look at as we start to explore absolute positioning.
				</p>
				<p style="background: lightgreen;">
				This is statically positioned paragraph within an absolutely positioned
div which is within a relatively positioned div [acting as a container]
which will give us something
				to look at as we start to explore absolute positioning.
				</p>
 </div> <!-- end of absolute 2 -->
</div> <!-- end of container -->
<div style="position:relative; z-index:100;"> <!-- footer -->
<p>Notice how the absolutely positioned block is not part of the
document flow and does not create any vertical size in the containing
postition:relative block.
</p>
</div> <!-- end of footer -->
  

Absolute Positioning