Recipe 1.15. Using Absolute Positioning

Problem

You want to position an element based on the window rather than on the element's default position.

Solution

Use the position property with the absolute value in the style sheet. Also use bottom, left, or both properties to indicate where to position an element:

.absolute {  position: absolute;  bottom: 50px;  left: 100px; }

Discussion

Designing with absolute places the content out of the natural flow of the page layout and puts it exactly where the CSS properties tell it to go within the current box or window. The sample code used in the solution tells the browser to position the element with the absolute class exactly 40 pixels down from the top and 20 pixels over from the left edge of the window.

Look at the natural flow of an image and a paragraph in Figure 1-37.

Figure 1-37. Default rendering of the content

Next, apply the absolute positioning to the div that encompasses the content by adding the class attribute and the absolute value and take a look at Figure 1-38:

Figure 1-38. Absolute positioning places an element based on its location within a window

<div >  <img src="/books/3/27/1/html/2/csscookbook.gif" alt="cover" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  sed diam nonummy nibh euismod tincidunt ut laoreet dolore  magna aliquam erat volutpat...  </p> </div>

You can also use right and bottom properties for changing the absolute position. Bottom represents the bottom of the window not matter how big or small you make the window. Beware that right and bottom aren't supported in Internet Explorer 5 and Netscape 6.0.

Absolute positioning of elements was used to shift a block of content around to demonstrate how it works. However, the practice needs to be used with care because absolutely positioned elements will remain in place even as flexible web page layouts change due to flexible browsers and/or text resizing.

Problem

Solution

Discussion

Figure 1-37. Default rendering of the content

Figure 1-38. Absolute positioning places an element based on its location within a window

See Also