jquery - 隐藏\显示内容超过其他扰流按钮

我做了一些扰流板，当您单击它们时，它将滑动一些信息

因此，我单击了spoiler1，它确实将其滑动，但在其他扰流器下却很奇怪。

像这样：

http://gyazo.com/4571423534e2442dc960d119c668dfa8

为什么这样做以及如何修复它，以便使当前扰流板打开时的扰流板在内容下滑落？

我的代码：

        <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);
}

我该如何解决？ ：/

谢谢。

最佳答案

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

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