As web pages become more active and dynamic, we desire content to appear and disappear at will. There are four CSS properties commonly used to accomplish this.

Each technique has its uses, along with its own advantages and disadvantages. It’s also common to employ more than one technique at the same time; where appropriate, I have linked to examples.

I’ll be applying the CSS in each example to the same basic code:

<p>Dice used for traditional Dungeons &amp; Dragons games
are actually reflections of the five Platonic solids: the tetrahedron (4 sided die),
octahedron (8 sides), dodecahedron (12)and icosahedron (20 sides).
<img src="dice.jpg" alt=”Photograph of metal dice" id="dice">
<p>The dice are used to determine the attributes of characters, 
and the character’s success or failure in undertaking tasks, challenges,
casting spells, attacks and defences.

The original CSS applied to the image:

img#dice {
	float: right;
	margin-left: 2em;
}

The techniques are:

visibility: hidden

img#dice {
	float: right;
	margin-left: 2em;
	visibility: hidden;
}

The obvious choice, and often the first employed. It works – you can’t see the influenced element – but the rest of the page still acts like the element is there; it is simply treated as being invisible, while taking up space.

Used for: “popping” elements in and out of existence, when an animated transition effect is not required.

Countered by: setting the element to visibility: visible.

opacity: 0

img#dice {
	float: right;
	margin-left: 2em;
	opacity: 0;
}

Setting opacity to 0 causes an element to be invisible, in the exact same way that visibility: hidden does. opacity the advantage that, unlike visibility, it can be transitioned and animated .

Used for: creating “fade in” and “fade out” effects.

Countered by: setting the element to opacity: 1 (or any value greater than 0).

position: absolute

img#dice {
	position: absolute;
	left: -1000px;
}

The oldest and most standardized of the techniques. Takes the element out of the flow of the page, causing it to layer above ordinary content. Using a high negative left value takes it off the page entirely.  float and margin are irrelevant with position: absolute, so they are removed.

Used for: Linear animation; “pop” placement of elements with the greatest compatibility between browsers.

Countered by: setting the left position to a value that allows the element to be seen on the page.

display: none

img#dice { display: none; }

The second-oldest of the techniques. Might be thought of as a compromise between position: absolute and visibility: hidden; the element is both invisible and no longer influences other content on the page.

Used for: stylesheets for alternative media, to eliminate inappropriate content; as a way of “collapsing” content around an element that will be “pushed” when it re-appears, as in an accordion menu.

Countered by: setting the element to display: block or any other value.

There are other ways of making elements vanish – for example, you could use scale to diminish the apparent size of an element until it is invisible – but on the whole they have the same effect as those I have described here. (scale will retain the original space of the element, just as opacity: 0 and visibility: hidden do).

Photograph by Phil Long, used under a Creative Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.