Question

我正在使用cross slide脚本。

问题是我无法将div移动到背景：幻灯片重叠所有其他div。试图改变z-index：将z-index 0设置为background div，将z-index：2设置为所有其他div。仍然没有成功。无论如何将幻灯片应用于背景div？

我的css结构看起来像那样

<body>
  <div id="bg">
  "all stuff goes here"  
   </div
</body>

和#bg的

#bg {
 /* Stretch background */
 position:fixed;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:0;
}

Answer 1

将css设为：

#bg {
 /* Stretch background */
 position:fixed;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:0;
}

#test {
    position: relative;
    background-color: red;
    z-index:5;
    width: 120px;
    margin-top:5px;
}

和html：

<body>
    <div id="bg"></div>
    <div id="test">"all stuff goes here"</div>
</body>

另见jsfiddle。

Answer 2

使用z-index: -1

将其带到后台

Answer 3

而不是将z-index：0或-1设为“bg”id，将所有其他内容z-index设为99或更高。所以你的“bg”将会回到你的幻灯片中。

Answer 4

您是否正确地观察了堆叠上下文，定位和z-index的（复杂）规则？

https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

Cross Slide z-index问题

4 个答案: