I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it.
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
#container {
position: absolute;
float: right;
z-index: 1;
}
.left1 {
background-color: blue;
height: 50px;
width: 100%;
}
.left2 {
background-color: green;
height: 50px;
width: 100%;
}
#right {
background-color: red;
height: 300px;
width: 300px;
float:right;
z-index: 999999;
margin-top: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>
</body>
</html>
You most probably don't need z-index to do that. You can use relative and absolute positioning.
I advise you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)
Edit: Just to be clear, positioning is not a replacement for them and I do use z-index. I just try to avoid using them. Using z-indexes everywhere seems easy and fun at first... until you have bugs related to them and find yourself having to revisit and manage z-indexes.