CSS:如何使用Z-Index设置隐藏div(定位到用户看不到的地方)?

使用 visibility: hidden 或者改变不透明度。这将允许元素位于文档的布局中(它将占用空间),但不会显示。如果你不想让它占据版面,那么 display: none z-index 为此目的。

有三种明显的方法可以实现这一点,但是没有一种使用z-index。

我做了一个 JS Bin demo 为了让你玩,看看在行动中的选择,以及使用特定方法的一些后果。

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

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