css layers

[d-machine]

How can I display a text box over a image?
the image is aligned in a div,
and I want that the text box will stay in this div, and won't go oustide of its dimensions.


thanks.

[forum_amnesiac]

Have you tried setting the image as the background

[d-machine]

The image includes Map links, so I can't do it.

[davelf]

i have this example, check it out
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=2865&stc=1&d=1252674869

good luck...

[d-machine]

Hi thank you, but it is based on tables, and the reason I asked it in css forum is because I'm looking for a css based solution :)

I tried to use z-index, but it didn't seem to work..

[davelf]

oow ya, sorry i don't pay attention on it, hehe:p

[fastdy]

I have the same problem but with overlapping a css menu over a Carousel sliding image js script.

[simcomedia]

You should be able to do it by simply having the parent div's position set as 'relative' and the overlaying one as 'absolute'. Then set the coordinates for the overlay from the top and left borders. A 'child' div set to absolute takes its coordinates based upon the parent div. Kinda like this:

#maindiv {
position: relative;
width: 500px;
height: 350px;
border: 1px #000 solid;
}

That creates your 'box'. Below creates the overlay 'box'.

#topdiv {
position: absolute;
height: 100px;
width: 150px;
top: 200px;
left: 250px;
}

HTML:

<div id="maindiv">blah blah map stuff
<div id="topdiv">blah blah stuff</div>
</div>