HTML and CSS Reference
In-Depth Information
Figure 5.12
An absolutely positioned element including right and top box offset prop-
erties
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.
Summary
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
front-end developers.
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
Search WWH ::
Custom Search