HTML & CSS: The Good Parts

The visibility and z-index Properties

The various box and positioning properties speak for manipulating page layout in two dimensions, and there are two additional properties that stylists need to manipulate layout in three dimensions.

Altering Visibility Without Affecting Document Flow

display: none is tremendously useful, but it affects the overall flow of documents in which it’s used. The visibility property and its single well-supported custom value—namely, hidden—make it possible to remove content from view without affecting the overall flow of the document’s layout. Where the assignment of display: none to an element causes its neighbors to be rendered as if it didn’t exist, visibility: hidden merely removes that element’s contents from view and renders its (apparently empty) element box.

visibility: hidden and opacity: 0 deliver the same result. The primary difference between them is with respect to support. visibility was part of an addendum to the original CSS specification drafted in 1996, while opacity is unevenly supported, although part of the CSS3 feature set.

Stacking

Where two elements overlap—in the simplest case, because one is contained by another—the latter element in the source order will be displayed over its predecessor. That’s all well and good, but matters are complicated by the nature of positioning and by the fact that any element contains at least two layers of its own.

For a normal block element, matter is stacked in the following order, from bottom to top: ...