5 + 3 ways to hide an element with CSS

I had a phone interview today with a company that I am incredibly hopeful to be contracting for shortly. The work is in my area of expertise (hello, Drupal); they seem okay with my request for 20 hours a week for the next 2-3 months (with the understanding that I can ramp up to 40 if needed for a project, as long as I drop back down to 20 as the norm); and I'd be working with a friend I've worked with before. Always a good thing.

In the interview, I was asked, "Using CSS, how many ways can you hide an element? Not from a bot, but from a user. I have been told four, but can remember only three."

I thought about it for a moment, and replied, "I can give you five."

Such the overachiever.

Starting with this layout:

The the five ways I answered:

1. Use the display property.

display: none;

This hides element and removes it from the rendering flow. It will not take up any space. The page renders as if the element didn't exist.

2. Use the visibility property.

visibility: hidden;

The visibility property hides the element but keeps the calculated space in the layout. There will be an empty space where this element would have been, but its content is hidden.

3. Use the opacity property.

opacity: 0;

Setting the opacity value to zero will hide the element and let the underlying elements display. You are saying, "Make this element a window."

It looks the same as 2 above, the element will still take up space.

4. Use the z-index property, with margins.

z-index: 1000;
margin: -100px;

If you have two elements, say, two divs, at the same child level in the DOM, you can position the second one on top of the first one, then set its z-index to be behind the first one. The first one will display, the second one renders under the first one and is hidden.

Done correctly, it looks the same as 1 above, the element will not take up space.

5. Use the left (or right) property.

left: -9999px;
position: relative;

You can send the element off the page by setting its left property (for LTR, or left-to-right, text) to some high negative value, and letting its position be relatve. That second property is important for the actual repositioning using the left property.

It looks the same as 2 above, the element will still take up space.

To my delight, when I was done with my answer, I was given another option!

6. Use the left (or right) property, with the position: absolute property.

left: -9999px;
position: absolute;

Using absolute instead of relative removes element from the rendering flow, allowing sibling elements to fill the space.

It looks the same as 1 above, the element will not take up space.

Whee!

Six ways to hide an element on a page with CSS.

$10 says someone else comes up with another way.

Update: well, that didn't take long.

Two more ways to hide an element with CSS include:

7. Use the transform property.

transform: translateX(-9999px);

The transform property adjusts the element. Using the transformX value, we move the element -9999px to the left, and hopefully off the screen. This is similar to the position + left properties example.

8. Use the clip property.

I haven't done this one before, but, in theory, this should work to trim / clip an element to a rectangle of 0px in size:

clip:rect(0px, 0px, 0px, 0px);

No wonder CSS is considered difficult by some: so many ways to do the same thing! Thanks to Jonathan Snook for the last two.