CSS Presence Summary

CSS can control whether an element appears, takes up space, fades out, or sits in front of another element. The most common tools are display, visibility, opacity, and z-index.

.hidden {
	display: none;
}
.invisible {
	visibility: hidden;
}
.faded {
	opacity: .3;
}
.front {
	position: relative;
	z-index: 2;
}

Display None

display: none; removes an element from the page layout. The element is not seen, and it does not take up space.

.box {
	display: none;
}

This is commonly used when menus, popups, or extra content should be hidden until something happens.

Visibility Hidden

visibility: hidden; hides an element, but the element still takes up space on the page.

.box {
	visibility: hidden;
}

This can be useful when you want the layout to stay the same even when the element is not visible.

Opacity

opacity changes how see-through an element is. An opacity of 1 is fully visible. An opacity of 0 is fully transparent.

.box {
	opacity: .5;
}

Opacity is often used to make something look disabled, faded, or less important.

Z-Index

z-index controls which element appears in front when elements overlap. A higher z-index appears in front of a lower z-index.

.front-box {
	position: relative;
	z-index: 2;
}

z-index usually needs position to be set. The most common simple choice is position: relative;.

This is commonly used for menus, dropdowns, popups, sticky headers, and anything else that needs to sit above other content.

The Simple Difference

Use display when the element should be removed from the layout. Use visibility when the element should be hidden but still keep its space. Use opacity when the element should stay in place but look faded. Use z-index when overlapping elements need to be stacked in the right order.

Presence