css - div 在图像 slider 上带有文本

Question

我在想；如何在图像 slider 上显示 div。现在 div 落在 slider 后面。 Z-index 没有帮助，我也尝试了一个 position: absolute 但这更加困惑。这是我的例子: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

不知道我是否理解，但是如果问题是 slider 在容器上方，解决方法很简单，去掉overflow:hidden;到.container{}