HTML and CSS Reference
In-Depth Information
.avatar {
position: absolute;
right: 15px;
bottom: 15px;
}
Figure 9-16 shows the result—perhaps not quite what you expected. The positioning context here is the
browser window, not the comment box, because the box itself isn't positioned and there are no other
positioned ancestors.
Figure 9-16.
The image is positioned in the bottom right corner of the window, which acts as the default positioning
context when there are no other positioned ancestors.
Of course there will be times when this is exactly what you want—an element positioned in the window
exactly where you told it to go—but it's not the effect we're going for here. We need to change the
element's positioning context by adding a
position:relative
declaration to the comment box:
.comment {
background-color: #e6f2f9;
width: 445px;
padding: 15px 15px 0;
border: 2px solid #98b8cd;
margin: 0 0 15px;
position: relative;
}
Without any offset values, the box stays just where it is in the normal content flow, but now it establishes a
new positioning context for any positioned descendants inside it. As you can see in Figure 9-17, the image
is in the bottom right corner of the box.
