CODEWITHSUNDEEP
jqueryhtmlcss
user3769402
user3769402

Reputation: 211

I'm not able to overlay one div on another

I have an image slideshow and I'm trying to overlay a small div over the whole slideshow.

My Html with SlideDiv being the div on top.

<div id="SlideDiv">
  <div class="fadein">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img1.jpg">
  </div>
</div>

My CSS.

SlideDiv 
{
  position: absolute;
  height:50px;
  width: 100px;
  background:#696969;
  top:400px;
  left: 502px;
}

.fadein {  
  position:relative; 
  border: 3px solid #838383;
  padding: 1px;
  width:852px; 
  height:480px; 
  left: 500px;
  top: 200px;
}

.fadein img { position:absolute; left:500; top:300; width: 852px; height: 480px;}

Upvotes: 0

Views: 93

Answers (2)

Spanka
Spanka

Reputation: 180

whatever element you want to show up as the overlay, ensure it has position absolute or relative specified and give it a z-index value that is greater than the divs you are trying to overlay.

It's lazy, but there's not many overlay solutions you cannot solve with:

.overlay {
  position: relative; /* or absolute - necessary for z-index to have an effect.*/
  z-index: 99999999;
}

If that doesn't fix it up, look to whether your overlay div is actually visible/display'd and whether there is some ajax dynamically changing some properties on the fly that's smothering your overlay (which is also why I use stupid z-index from time to time - most folks aren't dumb enough to go that high :) )

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

The markup has an open div tag which needs to be corrected.

    <div id="slide-div"></div>
    <div class="fadein">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img1.jpg">
    </div>

Next, the CSS selector must be adjusted to use a # sign, which is required for Id selectors. I would also recommend changing the id to slide-div to adhere to convention. Next you must specify the z-index property on the #slide-div element to have it show up above the div.fadein. Here is the completed CSS:

#slide-div 
{
   position: absolute;
   height:50px;
   width: 100px;
   background:#696969;
   top:400px;
   left: 502px;
   z-index: 100;
}

JS Fiddle: http://jsfiddle.net/A8uDR/

Basically, to overlay one element on top of another, the overlay must be position:absolute and have a z-index higher than the element it overlays. You may need to adjust the positioning properties (top/left), heights and widths to make it style how you prefer.

Upvotes: 1

Related Questions