HTML and CSS Reference
In-Depth Information
Figure 9-13.
Our starting point for the positioning to come
We can offset that image from its current location by adding a
position:relative
declaration. With the
right
and
bottom
properties, we can push the image into the space created by the container's padding:
.avatar {
float: left;
position: relative;
right: 17px;
bottom: 17px;
}
Figure 9-14 shows the result, with the image offset from its initial position. You can even position elements
outside of their containers. The surrounding box in our example has 15 pixels of padding and 2 pixels of
border, so the 17 pixel offset we've added to this image lets the element escape its container and overlap
the outer border. Also note that we haven't added any margins to the image; the space between the image
and the text appears because the text still wraps around the area where the image
used to be
, still
honoring the
float
property.
Figure 9-14.
The image is re-positioned 17 pixels from the right and 17 pixels from the bottom, relative to its initial
position
We can use this border overlap to our advantage to create a “notched” effect—as if the corner of the box
were cut away and the image rests in that notch—by adding some padding to the image and a background
color the same as the page background (white, in this case). A right and bottom border matching the outer
container's border completes the effect:
