带有文本在图像滑块上的div

Question

我在想; 我如何在图像滑块上显示div。 现在，div位于滑块之后。 Z索引无济于事，我也尝试过一个职位：绝对的，但更糟了。 这是我的示例： http : //gelijkanders.com/nieuw/template-devotion/

HTML：

 <div id="header">
            <img src="assets/images/header1.png" />
            <img src="assets/images/header2.png" />
        </div>   


 <div class="wrapper">  

        <div class="container">    


                <div id="headlight-left">
                    <img src="assets/images/casablanca.png"/>

                        <h1>Casa Blanca</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>

                                    <a class="button" href="#">Lees meer</a>

                </div>

                    <div id="headlight-center">
                        <img src="assets/images/sealicious.png"/>

                            <h1>Casa Blanca</h1>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
                                <a class="button" href="#">Lees meer</a>
                    </div>

                        <div id="headlight-right">
                            <img src="assets/images/cielo.png"/>

                                <h1>Casa Blanca</h1>

                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
                                            <a class="button" href="#">Lees meer</a>
                        </div>



            <div id="content">
                <h1>We are W Travel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.</p>

            </div> 

和CSS：

#header {
    height:464px;
    width:1920px;
    position:relative;
    overflow:hidden;
    z-index:-99;
}

#headlight-left {
    background:url(images/headlights-bg.png);
    background-repeat:repeat-y;
    width:289px;
    height:464px;
    float:left;
    padding:15px;
    position:relative;
    margin-top:-138px;
    z-index:99999;
}

#content {
    width:648px;    
    padding:20px;
    position:relative;
    top:20px;
    float:left;
    display:block;

}

我希望这有任何意义，并且您能够看到我的问题，因为我知道这是有可能的。 无论如何，谢谢！

Answer 1

我不知道我是否理解，但是如果问题是滑块在容器上方，则解决方法很简单，请删除overflow:hidden; 到.container{}

Answer 2

这是您正在寻找的http://jsfiddle.net/cancerian73/zdBRk/

.container {
width:1024px;
margin:0 auto;
position:relative;
/*overflow:hidden;*/ 
padding:20px;
    }

您要它重叠还是在jquery循环标语之后开始？