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.
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...
me_myself
Member
17 Points
31 Posts
DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 06:36 PM|LINK
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.
jjwhite
Member
251 Points
55 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 06:58 PM|LINK
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.
My Site
me_myself
Member
17 Points
31 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 07:55 PM|LINK
If you don't mind, can you give me an example. Thanks.
JoshStodola
Star
13736 Points
3177 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:26 PM|LINK
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.
me_myself
Member
17 Points
31 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:28 PM|LINK
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 !!
jjwhite
Member
251 Points
55 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:28 PM|LINK
sure thing:
html:
<div id="bottom">
<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
}
My Site
JoshStodola
Star
13736 Points
3177 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:33 PM|LINK
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...
me_myself
Member
17 Points
31 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:34 PM|LINK
<!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>jjwhite
Member
251 Points
55 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:37 PM|LINK
I would try removing the div tags from around the image.My Site
jjwhite
Member
251 Points
55 Posts
Re: DIV on top of another DIV without absolute positioning ?!
Oct 08, 2007 08:38 PM|LINK
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.
My Site