Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 323

Figure 9-5. Floating images
Since the text would be rendered right next to the floating images, you should declare margins to get the
final result shown in Listing 9-8. If you intend to display all images of a page on the right side, you can specify the
float:right; rule on images without identifiers or classes as img { float:right; } .
If you want to ensure that the next paragraph is displayed below a floating image, you can use the clear property
to stop the float on the left ( clear: right; ), on the right ( clear: left; ), or on both sides of the image ( clear:both; ).
Layers Above Each Other
Web site components can also be considered in a virtual space where the component order can be set by a CSS
property that represents depth (the third dimension). This property is called z-index . It is frequently used for setting
layer order. The larger the value, the higher the elements in the stack order. The element with the largest z-index
appears above all other elements of the page. This property works on positioned elements only (elements that have a
position rule). For example, the rulesets in Listings 9-9 and 9-10 put the layer with the logo above the main content.
Listing 9-9. The Lower Layer (Compared to Listing 9-10)
#main {
position:absolute;
width: 780px;
left: 50%;
margin-left: -390px;
z-index: 1;
}