Is there a way to display div elements on top of an image slider, rather than behind it? I've tried using z-index and position: absolute with no success. Here is an example:
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>
</div>
</div>
<p>and the css: </p>
<pre><code>#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'm hoping this all makes sense and that you can help me solve my issue. Thank you in advance!