Absolute Positioning Example

close window

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 outer "ancestorRelative" DIV. It is set to relative positioning but without any specified x/y positioning offset. In other words, even though it is styled with relative positioning, it remains in the normal flow of the document. The "nestedAbsolute" DIV, which immediately follows this text in the markup, is positioned with an x/y offset from this DIV rather than from the BODY.

This DIV with the pale red background is the "nestedAbsolute" DIV which is styled with absolute positioning. It is offset from the top left corner of it's positioned ancestor DIV by top:90px and left:40px. The positioning context for this DIV is the gray "ancestorRelative" DIV. Try stretching/shrinking the width of this window and watch how the various elements move in relation to each other. No matter how narrow or wide the screen becomes, the top left corner of the red and gray DIVs retain the same absolute position 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. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

CSS

#ancestorRelative {
   border: 1px solid #000; 
   position: relative;
   background-color: #DDD;
   }
 
#nestedAbsolute {
   position: absolute; 
   top: 90px; 
   left: 40px; 
   border: 1px solid red; 
   background-color: #FFCCCC;
   }

HTML Markup

<body>
 
   <p>Paragraph in the normal flow of the document ... 
    venenatis enim nec quam.</p>
 
   <div id="ancestorRelative">  
   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 ... 
   lacinia ut, augue. Nullam nunc.</p>
 
</body>