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

Question

I was wondering; how can i display div's over an image slider. Right now the div falls behind the slider. Z-index is not helping and i also tried a position: absolute but that messes up even more. Here is my example: 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> 

and the 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;

}

I hope this makes any sense and you are able the to see my problem because i know it's somehow possible. Anyway thanks in advance!!

Answer 1

I don't know if I understand, but if the problem is that the slider is over the container, the solution is simple, remove overflow:hidden; to .container{}

Answer 2

Is this what you are looking for http://jsfiddle.net/cancerian73/zdBRk/

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

Do you want it to overlap or start after the jquery cycle banner?