Why hiding elements using position: absolute and left: -30000px;?

Question

What are the reasons for this?

When reviewing some of the code that was written by previous developers, I often encounter with:

#fac {
    position: absolute;
    left: -30000px;
    visibility: hidden;
    opacity: 0;
}

Why do they do that? What's wrong with just display: none; ?

Maybe theyre trying to get the width or height of the element, you can't do that if is hidden... — Sam Jones, Jan 28 '15 at 11:43
Possibly for screen readers - [CSS Tricks](http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/) and [Now You See Me Article](http://alistapart.com/article/now-you-see-me). — Harry, Jan 28 '15 at 11:44
One is to be able to query the elements dimensions. Another is to be able to apply transitions/animations to it (*which do not work when using `display:none` and `display:block`*). — Gabriele Petrioli, Jan 28 '15 at 11:44
@SamJones nope. Most of the cases were in ``@media queries`` and no JS were discovered that tries to detect the widths. And why would anyone detect with of the element that is not relevant to the view? — knitevision, Jan 28 '15 at 11:46
@knitevision to center a dialog or something, to center with js you need the dimensions... — Sam Jones, Jan 28 '15 at 11:51
Once you've set `display: none` on an element and you want to "remove" it, you don't know if this element was `block`, `inline`, `table-cell`, `table` or `flex` etc And +1 for dimensions of element and transitions/animations — FelipeAls, Jan 28 '15 at 14:29
Note: `position: absolute; left: -9000px` is used for accessibility reasons (other technique: the Yahoo! one with `clip()`). Screen readers'll perceive the information while visually there's nothing on screen. **But** visibility: hidden and display: none will hide information to everybody so it's unrelated here — FelipeAls, Jan 28 '15 at 14:33

score 4 · Answer 1 · answered Jan 28 '15 at 12:03

There's huge difference between display:none and visibility:hidden;. Since the code is using visibility:hidden;, the element space will be there because it's just hidden. If the code has display:none instead of visibility then it wouldn't needed to use negative left value because the element will have no space for it.

+----------------------------+
|   header                   |
+----------------------------+
|                            |
|                            | I'm invisible only but I've space for it
+----------------------------+
|      footer                |
+----------------------------+


+----------------------------+
|   header                   |
+----------------------------+ I'm hidden and I don't have any space.
|       footer               |
+----------------------------+ 


+----------------------------+
|   header                   |
+----------------------------+--------------------------+
|      footer                |   I'm invisible          |
+----------------------------+   but positioned         |
                             |  absolutely, so user     |
                             |  doesn't see the space there
                             +--------------------------+

So, actually which one should I use?

It depends on the workflow of the website as an example see @Naeem Shaikh answer.

score 2 · Answer 2 · answered Jan 28 '15 at 11:44

2

This used to be used to fool browsers as display none never used to be read by browsers like google. By pushing the content off the page the browsers would still ready the content, thus helping with the google rankings.

answered Jan 28 '15 at 11:44

Aaron

10,187
3
23
39

score 1 · Accepted Answer · edited May 23 '17 at 12:24

sometimes you cant use display:none, example case you can see here Open a color input with display:none via a label (webkit),

(And there are more cases one already mentioned by Aaron) Here you can either use visibility:hidden and set the width padding and margin for the element to 0, ex:

1) This way:

input {
   visibility :hidden;
    width:0px;
padding:0;
margin:0;
}

2) or the other way that you shared

#fac {
    position: absolute;
    left: -30000px;
    visibility: hidden;
    opacity: 0;
}

3) Or the same thing is done this way:

input {
    visibility:hidden;
    position:absolute;
}

score 0 · Answer 4 · answered Jan 28 '15 at 12:09

We cannot give proper answer why they hidden element in that way.

Might they changing the position and opacity when click some <a> or other element.

Many options are there to hide HTML elements

1) visibility: Hidden; it will hide the element but still space will be there.

2) Display: none; it will hide div and element

3) For hiding text you can make text-indent: -200px; font-size: 0 etc.

Like this many tricks are there to hide elements.

score 0 · Answer 5 · answered Jun 13 '17 at 19:08

visibility:hidden and opacity:0 are useless when setting position absolute and left -xxx.

We sometimes had to use that method to let chrome automatically save the right username in Smart Lock, in a 2-step validation app.

If we set it to display none, it doesn't consider the input value. Using visibility hidden can affect UI. Using position:absolute left:-xxx is the easiest method, and it works fine all the time with Smart Lock.

Note: also add tabindex="-1" to prevent "tab" key to navigate to that input. Add that input just before your password field, and chrome will find it and use its value as "username" for smart lock.

score 0 · Answer 6 · answered Jun 13 '17 at 19:16

On some older browsers (and possibly some newer ones), you cannot submit form fields that have display:none even if the disabled attribute was not set. The code you're seeing could be a work-around for that. See https://stackoverflow.com/a/8318442/64279

Why hiding elements using position: absolute and left: -30000px;?

6 Answers6

Linked