HTML and CSS Reference
In-Depth Information
When we position the element using the box offset properties, the element overlaps the ele-
ment below it rather than moving that element down as the
margin
or
padding
proper-
ties would.
Absolute Positioning
The
absolute
value for the
position
property is different from the
relative
value
in that an element with a
position
value of
absolute
will not appear within the nor-
mal flow of a document, and the original space and position of the absolutely positioned
element will not be preserved.
Additionally, absolutely positioned elements are moved in relation to their closest relatively
positioned parent element. Should a relatively positioned parent element not exist, the ab-
solutely positioned element will be positioned in relation to the
<body>
element. That's
quite a bit of information; let's take a look at how this works inside some code (see
Figure
HTML
1.
<section>
2.
<div class="offset">...</div>
3.
</section>
CSS
1.
section {
2.
position: relative;
3.
}
4.
div {
5.
position: absolute;
6.
right: 20px;
7.
top: 20px;
8.
}
Search WWH ::
Custom Search