CSS for abs-2

  <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
  </script>
  

Page Content

<h3 style="background-color: blue;">Absolute Positioning</h3>
<div id="container">
<p class="abs" style="width:150px; top: 0px;">
This is an absolutely positioned paragraph which will give us something
to look at as we start to explore absolute positioning.
</p>
</div>
<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>
  

Absolute Positioning

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.