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

Using relative positioning, you can adjust the layout of elements relative to where they
would be in the normal static flow. To demonstrate this, you will copy the image element
many times to show the flower picture many times inside the div . This is shown in static flow in
Figure 4-28.
FIGURE 4-28 An image duplicated in static flow
Now, you will move all the images to the left by 25 px. This will be done by specifying
relative positioning and -25 px for the left property. As this demonstrates, you can specify
negative numbers for the left or top properties. Figure 4-29 shows the output of the following
code:
img:nth-child(1n+0) {
position: relative;
left: -25px;
top: 25px;
}
FIGURE 4-29 The use of the left property with relative positioning
As shown in Figure 4-29, all image elements have moved to the left by 25 px. Using relative
positioning, you can actually make your HTML elements overlap. While the above code moves
all the images over by 25 px, if you were to modify the code such that each element was
moved proportionately more to make them overlap, you can create some nice effects. Recall
that the elements are moved based on where they would have been in normal flow. Since
the images at center are 100 px from each other, you will need to move the second image,
third, and further image by the same amount as its neighbor moved, plus the amount of the
desired overlap. The following code shows this: