CSS:How can i hide (Positioning to somewhere which user cant see) a div with Z-Index settings ?

Question

How can i hide (Let it be on the page somewhere and the user shouldnt see it) a div using some tricks with Z-Index ? I dont want to put style="display:none;" to the div to hide it.

Any thoughts ? Looking for a solution which works in major browsers

Answer 1

Use visibility: hidden or change the opacity. This will allow the element to be in the document's layout (it will occupy space), but it will not be shown. If you don't want it to occupy the layout, then display: none should be what you use. I would not recomment using z-index for this purpose.

Answer 2

<style type="text/css">
    div#over {
        height: 50px;              // must be same height as 'under' div
        background-color: gray;    // needs some kind of background
        z-index: 0;                // must be higher than 'under' div
    }
    div#under {
        height: 50px;              // must be same height as 'over' div
        position: relative;        // relative to where i would be normally
        top: -50px;                // negative of my height
        background-color: red;     // bloody mess
        z-index: -1;               // must be lower than 'over' div
    }
</style>

<p>What's going on?</p>

<div id="wrapper">
    <div id="over">Move along, nothing to see here.</div>
    <div id="under">GHASTLY MURDER ZOMG</div>
</div>

Answer 3

There's three obvious ways of achieving this, none of them using z-index, though.

I've put together a JS Bin demo for you to play with, to see the options in action, and some of the consequences of using a particular approach.

In short:

1. opacity: 0;
2. position: absolute;
3. height: 0; width: 0; overflow: hidden;