CSS: Как я могу скрыть (Позиционирование куда-то, что пользователь не может видеть) div с настройками Z-Index?

Question

Как я могу спрятать (пусть это будет где-то на странице, а пользователь не должен его видеть) div, используя некоторые приемы с Z-Index? Я не хочу ставить style = "display: none;" в div, чтобы скрыть это.

Есть мысли? Ищете решение, которое работает в основных браузерах

Answer 1

Существует три очевидных способа достижения этого, однако ни один из них не использует z-index.

Я собрал демо JS Bin , чтобы вы могли поиграть с ним, увидеть варианты в действии и некоторые последствия использования определенного подхода.

Короче говоря:

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

Answer 2

Используйте visibility: hidden или измените непрозрачность.Это позволит элементу находиться в макете документа (он будет занимать место), но он не будет показан.Если вы не хотите, чтобы он занимал макет, то display: none должно быть тем, что вы используете.Я бы не рекомендовал использовать z-index для этой цели.

Answer 3

<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>