Foundation HTML5 with CSS3

Page Layout with CSS

Figure 9-17. The positioned image is now inside the box due to its new positioning context

The positioned element overlaps the other content because it was removed from the flow and no longer
takes up space; the text flows normally, completely unaware that there’s an image in its midst. We can
make some space for the image by padding the box, remembering to adjust its width accordingly:

.comment {
background-color: #e6f2f9;
width: 325px;
padding: 15px 135px 0 15px;
border: 2px solid #98b8cd;
margin: 0 0 15px;
position: relative;
}

In Figure 9-18 you’ll see that the box now has reserved space for the positioned image. Padding counts as
part of the box when determining the location of an absolutely positioned descendant. The element is
offset from the calculated edge as the browser draws it, including any padding, but inside any borders or
margins.

Figure 9-18. Padding creates space for the positioned image. The content reflows within the confines of its narrower
width.

All is well and good, as long as the containing box is tall enough to accommodate the positioned element’s
height. An absolutely positioned element doesn’t affect the flow of surrounding content, so it has no effect
on the size of the box around it. If the box is short due to shorter content, and the positioned element
simply overlaps it, like you see in Figure 9-19.