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:
Search WWH ::

Custom Search