CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 260

each other, the order in which they are layered can be set using the z-index property.
There are some caveats with this property, but they are easy to grasp:
• Both elements overlapping each other need to have the same parent element
(they need to be contained together in the same HTML block) if the layering is
to be changed.
• At least one of the elements needs to have its position property set to rel-
ative , absolute , or fixed .
• At least one of the elements needs to have its z-index property set. A higher
number relative to the other element will bring an element in front of the other
one, while a lower number will bring it behind.
___________
9 See all CSS display property values here: http://www.w3.org/TR/css3-box/#display
Backgrounds and borders
Background and borders used to be pretty limited. The shapes were rectangular with
solid-colored backgrounds or a single repeating image. The borders had some variety
(solid, dashed, dotted, and so on) but were still stuck in a rectangular shape. Rounded
corners, for instance, have been notoriously complex to create. CSS3 has made many
effects, including rounded corners, much easier. Rounded corners are part of the CSS3
Backgrounds and Borders Module, which also adds the ability to add multiple back-
grounds, clip and repeat backgrounds in new ways, and add drop shadows, to name a
few additions.
Basic background color and images
The background - color property sets the color of the background. It will take any
color format described in the "Color" section in this chapter. The color is drawn behind
any background images so it will show through if the background has images attached
that contain transparent areas. The value transparent can be given so that no color
shows through.
The background-image property is used to attach images to the background of
an element. The syntax url(“path/to/bgimage.png”) is used to attach the im-
age, where path/to/bgimage.png is the file path to the image to include. The file
path may be relative to the location of the style sheet, or it may be absolute (using ht-
tp:// or similar in the beginning of the path). It's not uncommon to see relative file
paths such as url("../images/pic.jpg") since the style sheet is often placed