jquery - 隐藏\显示内容覆盖其他剧透按钮

Question

我做了一些剧透，当你点击它们的时候，它会滑动一些信息

所以我点击了扰流板 1，它确实滑动了但很奇怪地在其他扰流板下面..

像这样:

http://gyazo.com/4571423534e2442dc960d119c668dfa8

为什么会这样，我该如何解决它，以便当前剧透 im 开口下方的剧透会在内容下方滑动？

我的代码:

        <div id="container">
    <div class="spoiler1"><span id="title1">This is Test</div>
        <span class="hide1">testttttttttttttttttttttt</span><!-- This is what opens after clicking on spoiler -->
        <br /><br />
    <div class="spoiler2"><span id="title1">This is Test</div>
        <br /><br />
    <div class="spoiler3"><span id="title1">This is Test</div>
        <br /><br />
    <div class="spoiler4"><span id="title1">This is Test</div>
        <br /><br />
        <br /><br />
        </div>

<script type="text/javascript">

$(document).ready(function(){

        $(".hide1").hide();
        $(".spoiler1").show();

    $('.spoiler1').click(function(){
    $(".hide1").slideToggle();
    });

});

</script>

CSS:

#title1 {
    color: #1794c8;
    position: relative;
    top: 10px;
    left: 10px;
    }

.spoiler1{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
        z-index:1;

}
.spoiler2{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler3{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler4{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}

我该如何解决这个问题？ :/

谢谢。

Answer 1

在 spoiler-1 上使用 z-index=1 css 属性。

http://www.w3schools.com/cssref/pr_pos_z-index.asp