Share via

Absolute positioning

  • Article

An absolutely positioned element is always relative to the next positioned parent. If there is no parent element, the containment block is used instead. Values for left and top are relative to the upper-left corner of the next positioned element in the hierarchy. For example, to place an image at the upper-left corner of the document, set the attributes to 0.

<img src="sample.gif" style="position: absolute; left: 0px; top: 0px">

This code sample positions the image within the border of the HTML element. Be aware that the HTML element has a default border of 1. If you do not want two borders, set the border of the body to 0 to position the image at the 0,0 coordinates of the browser window.

How a positioned parent affects absolute positioning

To see how a positioned parent affects absolute positioning, consider the following example:

<div style="position: relative; left: 50px; top: 30px; height: 100px; width: 100px;">
    Some text inside the div that will be hidden by the image because
    the image will be positioned over this flowing text.
<img src="sample.gif" style="position: absolute; left: 0px; top: 0px;">
<div>

This example places the IMG element at the upper-left corner of the DIV element, which is itself positioned on the page.

Absolute positioning and document flow

Setting an absolute position pulls the element out of the flow of the document and positions it without regard to the layout of surrounding elements. If other elements already occupy the given position, they do not affect the positioned element, and the positioned element does not affect them. Instead, all elements are drawn at the same place, causing the objects to overlap. You can control this overlap by using the z-index property to specify the order in which elements are stacked at the same location.

The contents of a positioned element flow within the dimensions of the element as default HTML would flow. For example, text is wrapped based on the width of the element that contains it. Any inline elements contained within a positioned element are placed next to each other in the order in which they occur inside the element, according to the size and shape constraints of the positioned element in which they are contained.

See also

Concepts

What is positioning?
Fixed positioning
Relative positioning
Positioning considerations

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.