HTML and CSS Reference
In-Depth Information
.avatar {
float: left;
position: relative;
right: 17px;
bottom: 17px;
padding-right: 15px;
padding-bottom: 15px;
background: #fff;
border-right: 2px solid #98b8cd;
border-bottom: 2px solid #98b8cd;
}
Figure 9-15 shows the finished result. The padding and border we added to the image has also affected
the text flow. Whatever space an element would occupy in its original position remains in place after the
element is offset with relative positioning. The text wraps and flows around an empty, avatar-sized area as
if the image were still occupying that space.
Figure 9-15.
The positioned image with some padding and borders creates an effect as if a notch were cut out of the
corner of the box
Absolute Positioning
Absolute positioning goes a step further than relative positioning, allowing you to completely remove an
element from the normal flow of content and place it in any location. Instead of leaving behind an element-
sized hole of whitespace, the other content on the page flows and behaves as if the positioned element
isn't even there.
Rather than offsetting the element relative to its starting position, the
top
,
right
,
left
, and
bottom
properties specify the element's new location relative to its
nearest positioned ancestor
. The first
containing element that has any
position
value other than
static
defines the
positioning context
for the
absolutely positioned descendant. If the element has no positioned ancestors, then the positioning context
is the browser window itself.
We'll demonstrate with the same comment box and avatar image as before, setting it back to the starting
point you saw in Figure 9-13. This time we'll apply
position:absolute
to the avatar image and place it in
the bottom right corner, 15 pixels from the right and 15 pixels from the bottom:
