Absolute Positioning Example

Relative > Absolute > Absolute

This "topAncestorRelative" DIV has a yellow background and is styled with relative positioning in the normal flow of the document (no x/y offset). In the markup, the gray "containerAbsolute" DIV is positioned between the two normal paragraphs, below.

Paragraph in the normal flow of the document. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.

This DIV with a gray background is the "containerAbsolute" DIV. It is set to absolute positioning and is offset by top:55px and left:55px from the top left corner of the yellow "topAncestorRelative" DIV. The red "nestedAbsolute" DIV, which immediately follows this text in the markup, is positioned with an absolute x/y offset from this DIV.

This DIV with the pale red background is the "nestedAbsolute" DIV. It is styled with absolute positioning and is offset from the top left corner of the gray "containerAbsolute" DIV by top:90px and left:40px. Try stretching/shrinking the width of this window and watch how the various elements move in relation to each other.

Paragraph in the normal flow of the document. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien.

CSS

#topAncestorRelative {
   border: 1px solid #000; 
   position: relative;
   background-color: #FFC;
   }
 
#containerAbsolute {
   position: absolute; 
   top: 55px; 
   left: 55px; 
   border: 1px solid #000; 
   background-color: #DDD;
   }
 
#nestedAbsolute {
   position: absolute; 
   top: 90px; 
   left: 40px; 
   border: 1px solid red; 
   background-color: #FCC;
   }

HTML Markup

<body>
   <div id = "topAncestorRelative">
 
      <p>This "topAncestorRelative" DIV has a yellow... 
      between the two normal paragraphs, below.</p>
 
      <p>Paragraph in the normal flow of the document... 
      venenatis enim nec quam.</p>
 
      <div id="containerAbsolute">  
      This DIV with a gray background...
 
         <div id = "nestedAbsolute"> 
         This DIV with the pale red background...
         </div>
 
      <p>Paragraph in the normal flow of the document... 
      volutpat eros sapien nec sapien</p>
 
    </div>
</body>