Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 261

img:nth-child(2) {
position: relative;
left: -25px;
}
img:nth-child(3) {
position: relative;
left: -50px;
}
img:nth-child(4) {
position: relative;
left: -75px;
}
This code produces the output in Figure 4-30. Each element after the first is moved over
enough so that it overlaps its left-side neighbor by 25 px. Notice that the left property value
is incrementally larger to account for the fact that its neighbor has moved as well.
FIGURE 4-30 The use of relative positioning to overlap images
Using absolute positioning allows you to specify the location of an element such that it is
removed from the normal flow of the page. That is to say that the rest of the page flows as
if this element does not exist. The element can be considered to be hovering over or under
the content that is in the normal flow of the page. With this approach, it is also possible to
overlap elements.
EXAM TIP
When overlapping elements using absolute positioning, CSS provides a z-index property.
This allows you to specify in what order the elements should stack on the page along the
z-axis (the third dimension!).
The following code demonstrates using absolute positioning of an image over a block of
text. The text underneath the image renders in its normal flow. The image does not impact
anything in the normal flow of the document. The output of this code is shown in Figure 4-31.
img {
position: absolute;
left: 215px;
top: 100px;
height: 50px;
width:50px;
}