The hidden value of the CSS visibility property suppresses an element’s visible rendering without removing its position from document flow. The element continues to occupy space, leaving an empty area for surrounding content to flow around. Unlike opacity: 0, it prevents an invisible element from remaining in front of other interactive content; unlike display, visibility can participate in transitions. section 15.3.2
Fading a menu out of the way
A dropdown can combine visibility with opacity: start with visibility: hidden and opacity: 0, then set both to visible and 1 when the dropdown opens. On closing, transition opacity for 0.2 seconds and delay visibility by the same duration. The menu fades away first; once fully transparent, it becomes hidden and no longer intercepts clicks. Absolute positioning prevents its preserved flow space from affecting the surrounding layout. section 15.3.2
Listing 15.9 Using a transition delay to manipulate when visibility changes
.dropdown__drawer {
position: absolute;
background-color: var(--background-color);
width: 10em;
visibility: hidden; #1
opacity: 0; #1
transition:
opacity 0.2s linear,
visibility 0s linear 0.2s; #2
}
.dropdown.is-open .dropdown__drawer {
visibility: visible; #3
opacity: 1; #3
transition-delay: 0s; #4
}
Inspect the paired visibility and opacity rules, including the delayed hide and immediate show behavior. section 15.3.2
Do not confuse visibility: hidden with overflow: hidden. The former hides an element while preserving its flow position; the latter clips content that extends beyond a container’s padding area. Applying overflow: hidden to the body is instead used to stop page scrolling while a modal is open. section 15.3.2 section 6.1.2
