Overlapping divs

HTML & CSS
1

I have a slideshow and under the slideshow a content div. I would like the content div to overlap the slideshow so I have given the div a negative top margin, but whatever I try the content is going under the slideshow. Here is my CSS and HTML:


#slideshow  {
  width: 1200px;
  height:450px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#slideshow .slide {
  width: 1200px;
  height: 450px;
  position:absolute;
  top:0;
  left:0;
  z-index:8;
  opacity:0.0;
}

#slideshow .slide.active {
  z-index:10;
  opacity:1.0;
}

#slideshow .slide.last-active {
  z-index:9;
}

#slideshow .slide img {
  width: 1200px;
  height: 450px;
  display: block;
  border: 0;
}

#content {
  width: 960px;
  height: 100px;
  margin: -82px auto 0;
  position: relative;
  z-index: 15px;
  overflow: hidden
}



<div id="slideshow">
        <div class="slide active">
 		<img src="images/site/slides/homepage/1.jpg"alt="" /> 
  </div>
	<div class="slide">
 		<img src="images/site/slides/homepage/2.jpg"alt="" />
  </div>
	<div class="slide">
 		<img src="images/site/slides/homepage/3.jpg"alt="" />
  </div>
	<div class="slide">
 		<img src="images/site/slides/homepage/4.jpg"alt="" />
  </div>
</div>

<div id="content">
	
</div>

I have given the content a higher z-index as well but nothing seems to help. Any ideas?

Thank you

2

The z-index value of Content has “px” after the number. Snip that and you should be OK. :slight_smile: