PDA

Click to See Complete Forum and Search --> : overlapping layers

lunchboxcr
04-19-2010, 08:56 PM
Hello, I am having some trouble overlapping the layers in my css code.

here is the code i have for the two layers I am trying to overlap...
The layer titled "lunchbox" contains an image that I want to place on TOP of the layer titled "container".


#lunchbox{
background-color: transparent;
margin-left: 200px;
margin-top: 0px;
}

#container {
background-color: #ffffff;
width: 800px;
border: 1px solid #000000;
margin-left: 380px;
margin-top: 340px;
margin-bottom: 100px;
}

I tried using the z-index tag but that did not seem to work either.


Sorry if this questions sounds dumb, as It has been awhile since I have created a website and I am slightly rusty. I am just frustrating myself more and more trying to get figure this out on my own.

Any help would be greatly appreciated. Thanks :)
tirna
04-19-2010, 09:12 PM
Maybe use this as a template.

The 'position' style allows you to place elements on top of each other.

I put some dummy text in each div and a red borde around lunchbox so you can see its boundaries and location.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--

#container {
position: relative;
background-color: #ffffff;
width: 800px;
border: 1px solid #000000;
margin-left: 380px;
margin-top: 340px;
margin-bottom: 100px}

#lunchbox{
border: 1px solid red;
position: absolute;
top: 0px;
left: 200px;
background-color: transparent}

-->
</style>

</head>
<body>

<div id="container">
This is container div
<div id="lunchbox">This is luncbox div</div>
</div>

</body>
</html>
EinsteinsEyes
04-19-2010, 09:37 PM
I think it is the position attribute which will help with the web design issue. Then actually nesting them in the code should make it all work.
lunchboxcr
04-20-2010, 12:53 AM
Thank you for your help!!!
tirna
04-20-2010, 01:00 AM
no problem :)