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, ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.