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. Sorry for my English. Thanks in advance.
<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>
The answer is
you could put the style in container div menu with:
<div style="position:relative; z-index:10">
...
<!--html menu-->
...
</div>
before
after
Ok, Im assuming you want to put the .left inside the container so I suggest you edit your html. The key is the position:absolute and right:0
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 999999;
margin-top: 0px;
position: absolute;
right:0;
}
here is the full code: http://jsfiddle.net/T9FJL/
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 9999;
margin-top: 0px;
position: absolute;
top:0;
right:0;
}
position: absolute; top:0; right:0; do the work here! :) Also remove the floating!
Source: Stackoverflow.com