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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With