HTML and CSS Reference
Figure 5.12 An absolutely positioned element including right and top box offset prop-
In this example the <section> element is relatively positioned but doesn't include any
box offset properties. Consequently its position doesn't change. The <div> element with
a class of offset includes a position value of absolute . Because the <section>
element is the closest relatively positioned parent element to the <div> element, the <di-
v> element will be positioned in relation to the <section> element.
With relatively positioned elements, the box offset properties identify in which direction
an element would be moved in relation to itself. With absolutely positioned elements, the
box offset properties identify in which direction an element will be moved in relation to its
closest relatively positioned parent element.
As a result of the right and top box offset properties, the <div> element will appear
20 pixels from the right and 20 pixels from the top of the <section> .
Because the <div> element is absolutely positioned, it does not sit within the normal flow
of the page and will overlap any surrounding elements. Additionally, the original position
of the <div> is not preserved, and other elements are able to occupy that space.
Typically, most positioning can be handled without the use of the position property and
box offset properties, but in certain cases they can be extremely helpful.
Learning how to position content within HTML and CSS is a huge step toward mastering
the two languages. Add to this the box model, and we're well on our way to becoming
To review, within this lesson we covered the following:
• What floats are and how to use them to position content
• How to clear and contain floated elements