DIV on top of another DIV without absolute positioning ?!

I need to have a bottom div (its got a big image) and there should be a small top div with another image - overlaying the big image. The challenge here is i should not position the div's "absolute" - it should be relative but one div on top of the other. Any help regarding this would be very much appreciated.

Thanks in advance.

Re: DIV on top of another DIV without absolute positioning ?!

You could nest the top div inside the bottom div and use the z-index css property to push it on top of the bottom div.

Re: DIV on top of another DIV without absolute positioning ?!

If you don't mind, can you give me an example. Thanks.

Re: DIV on top of another DIV without absolute positioning ?!

If your "outer" div has a big image and you want something to go on top of the image, then you need to use it as a background image and nest your "inner" div appropriately. For example...

<div style="background-image:url(image.jpg);">
        <div style="position:relative; top:10px; left:20px;">
            <img src="inside_image.jpg" />
        </div>
    </div>

Hope this helps! Please mark the helpful post(s) as Answer.

Re: DIV on top of another DIV without absolute positioning ?!

Thanks. But the problem is i cannot use the big image as background !! it has to be inside an <img> tag and the small image on top of it !!

Re: DIV on top of another DIV without absolute positioning ?!

sure thing:

html:

<div id="top">stuff in the top</div>

</div>

css:

#bottom{

    width: 200px;
    height: 200px;
    background-color: black;

}

#top{

    width:100px;
    height:200px;
    background-color:red;

z-index: 999; <-- the z index property will push the #top div above the bottom div

}

Re: DIV on top of another DIV without absolute positioning ?!

me_myself
But the problem is i cannot use the big image as background !! it has to be inside an <img> tag and the small image on top of it!!

It has to be an IMG tag? That's stupid. If it's going behind another image then it truly is a background, so your requirements are ridiculous.

I see no reason for doing it this way, but whatever you say... [^o)]

You will need to use absolute positioning to accomplish this then.

Best regards...

Re: DIV on top of another DIV without absolute positioning ?!

I used the below code - something doesn't seem to fit !! It does not overlay properly !!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
<!--
#bottom{
    width: 200px;
    height: 200px;
    background-color: black;
}
#top{
    width:100px;
    height:200px;
    background-color:red;
    z-index: 999;
}
-->
</style>
</head>
<body>
<div id="bottom">
    <div><img src="images/big.gif" width="529" height="332" /></div>
  <div id="top"><img src="images/small.gif" width="20" height="122" /></div>
</div>
</body>
</html>

Re: DIV on top of another DIV without absolute positioning ?!


me_myself
<div id="bottom">

    <div><img src="images/big.gif" width="529" height="332" /></div>
  <div id="top"><img src="images/small.gif" width="20" height="122" /></div>
</div>

I would try removing the div tags from around the image.

Re: DIV on top of another DIV without absolute positioning ?!

Josh is right. I don't see any reason why you couldn't just make it a background image. It would be a lot easier that way.

Re: DIV on top of another DIV without absolute positioning ?!

JoshStodola

me_myself
But the problem is i cannot use the big image as background !! it has to be inside an <img> tag and the small image on top of it!!

It has to be an IMG tag? That's stupid. If it's going behind another image then it truly is a background, so your requirements are ridiculous.

I see no reason for doing it this way, but whatever you say...

You will need to use absolute positioning to accomplish this then.

Best regards...

The requirement is such that both images loads dynamically, when you click on the small image (top) the bottom image changes/modifies accordingly - that was the reason i am not able to have that as a static background. Thanks.

Re: DIV on top of another DIV without absolute positioning ?!

Pfff, you call that a reason?! That's a dumb reason to disregards background images!! You can change them just as easily/dynamically as you would otherwise. Keep an open mind, instead of instantly saying "Oh, I cant use background images NO WAY!!!"

Re: DIV on top of another DIV without absolute positioning ?!

That's right: you can use javascript to change the background image of the bottom div. just add a javascript function that changes the background-image property of the bottom div and call the function on the onclick() of the image in the top div.

Re: DIV on top of another DIV without absolute positioning ?!

Alrighty, here it goes - i am creating a web map and trying to place a slider on top of the map. The map should be inside a div and the slider on top of the map should also be in a div !!!!!!!!!!!!!!!!!!!!!!

Any ideas please ;)

Re: DIV on top of another DIV without absolute positioning ?!

How about if you place the top div below the bottom div and then use a negative top-margin on the top div something like this:

<div id="bottom">
    <img alt="map" src="map.jpg" />
</div>
<div id="top" style="margin-top: -100px;">
    <img alt="slider" src="slider.jpg" />
</div>

The slider div will get rendered after the map div and the negative margin will draw on top of the map div. You would have to adjust the margin-top value accordingly to whatever adjustment you would need.

Re: DIV on top of another DIV without absolute positioning ?!

Works like a Charm :) Thanks jamezw.

Thank you guys for all your support. This forum rocks !!