Wasn't I just so clever?« an older post
a newer one »Um... no.

5 + 3 ways to hide an element with CSS

Blog

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.

Comments

Hey, I got another one, how about changing around the axis so that it is 'flat' from the screen view via transform: rotateX(90deg) The element is still there of course but it's so flat and perpendicular with the screen that it doesn't show up in most modern browsers (try it).

Was the company Yelp by chance? I just got the same question with them today. I gave numbers 1,2,and 6 from your list. But when I asked afterwards what answers they were looking for it was 1 & 2, but their third was "set height:0;width:0;". I thought it was a bit weird they had one specific third answer, since there are clearly a bunch of ways to hide an element from the user.

The company wasn't Yelp, but that is another one!

I clearly need to update the title of this post. :)

Well that was pretty impressive to come to know about the different ways by which an element can be hidden with CSS. All the methods seemed effective to me and works perfectly too. I would love to try these methods out. Thanks for sharing.

Here is another one:

{width:0; height:0; overflow:hidden;}

Yes! Similar to the comment above, with the height and width values. Is the hidden overflow needed?

Simple, yet effective:

transform: scale(0);