css - 将包含图像滑块的 div 定位在所有其他 div 后面

Question

我有一个图像滑块，我想将它放在其他几个 div 后面。我玩过，有过成功，postion:absolute也position:relative没有成功过——一切都转向了一边，而且z-index没有明显的变化。我在想我在某个地方错过了一个步骤或想法，但不确定在哪里可以转向/要寻找什么。

ETA：<div id="home-slider">应该落后于一切。

jsfiddle

html

<div id="home">
        <div class="logo">
            <h1><a href="#"><img src="http://lorempixel.com/232/232" alt="logo" id="logo" /></a></h1>
        </div><!-- end logo -->

        <div id="slider_mask">
            <div class="slide_container">
                <div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
                <div class="slide"><p>is the maker + doer for makers + doers</p></div>
                <div class="slide">
                    <ul>
                    <li>No items.</li>                  </ul>
                </div>
            </div>
            <div class="left_button"><a href="#" class="left-arrow" title="left arrow"></a></div>
            <div class="right_button"><a href="#" class="right-arrow" title="right arrow"></a></div>
        </div>

        <div id="home-slider" style="position:relative;">               
             <img src="http://lorempixel.com/g/840/420" alt="home-slider" />
        </div>

    </div><!-- end home -->

css

/* Home */

#home #home-slider {
    height: 420px;
    width: 840px;
}

#home .logo {
    padding-top: 215px;
    margin: 0 auto;
    width: 232px;
}

#home #slider_mask {
    width: 600px;
    margin: 0 auto;
    padding-top: 60px;
    position: relative;
    overflow: hidden;
}

#home #slider_mask .left_button {
    float: left;
    display: block;
    width: 23px;
    height: 25px;
    background: url(img/left-arrow.png);
    text-indent: -99999px;
}

#home #slider_mask .left_button:hover {
    background: url(img/left-arrow-hover.png);
    background-position: 0 0;
}

#home #slider_mask .slide_container {
    float: left;
    font-size: 120%;
    text-align: center;
    width: 300px;
}

#home #slider_mask .right_button {
    float: right;
    display: block;
    width: 23px;
    height: 25px;
    background: url(img/right-arrow.png);
    text-indent: -99999px;
}

#home #slider_mask .right_button:hover {
    background: url(img/right-arrow-hover.png);
    background-position: 0 0;
}

#home #slider_mask .slide {
    float: left;
    display: block;
    text-align: center;
}

Answer 1

尝试简单地overflow: hidden从这里删除：

#home #slider_mask {
width: 600px;
margin: 0 auto;
padding-top: 60px;
position: relative;
overflow: hidden;
}

Answer 2

删除您的内联样式#home-slider并将其添加到其中

#home-slider{
  position:absolute;
  top:0;
  z-index:-1;
}