Overlapping divs
I require 2 overlapping divs, which look like the one below.
------------------------------------
| | |
| ------------------ | |
| ' '| |
| ' '| |
| ' '| |
| ' '| |
| '开发者_开发技巧 '| |
| ' '| |
| ' '| |
| --------------------| |
| ' '| |
| ' '| |
| -------------------| |
| | |
| | |
------------------------------------
But somehow am unable to get it. here is the place am fiddling out Can anyone tell me where am I going wrong.
Edit 1: I have a left div and a right div. The left div has the overlapping div. Right div is a normal div. I guess most of you are confused and thing the right div to be the overlapping one, there are 2 divs in the left div i need those to overlap.
Sorry to confuse you all.
I think you want something like this:
html
<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>
css
.parent {
position: relative;
}
.a {
position: absolute;
width: 100px;
height: 100px;
z-index: 100;
background: red;
}
.b {
position: absolute;
width: 80px;
height: 180px;
z-index: 110;
left: 10px;
background: blue;
top: 10px;
}
Edit: in your case parent = contentContainer, a/b = leftContainer/rightContainer
I have changed like this:
#rightContainer {
/*float:right ;*/
width:20%;
/*margin:0px;*/
margin-top: 30px;
margin-left: 30px;
padding:0px;
position:relative;
background-color:Lime;
}
You may change the "30px" as you like. I have tested in FireFox only.
You will have to use top
, left
and z-index
properties for that.
Im not really sure how to use the z-index
But i think this might help in the style tag
margin:-50px -50px 0px 0px;
the minus property works, how well it does should be all about testing
精彩评论