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
5.12 ) :
Click here to view code image
1. <section>
2. <div class="offset">...</div>
3. </section>
Click here to view code image
1. section {
2. position: relative;
3. }
4. div {
5. position: absolute;
6. right: 20px;
7. top: 20px;
8. }
Search WWH ::

Custom Search