Paradoxical effect for HTML <div>s using CSS - html

Question

I am stuck here. Please help.
I want to make the following through css.
But when I use CSS positioning, I am getting this output
The fourth(GREEN) layer should go under first layer(BLUE) which is not happening.
This is the code I used.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle: http://jsfiddle.net/rkubs/
Even I tried to use Z-index. But no use. Help me. Thanks in advance.

Answer 1

WORKING DEMO :before
senario:
Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2
With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.
Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.
HTML
<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>
CSS
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO WITH BOX-SHADOW
Here you just need to change the width and height of .box2.
senario:
you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .
Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.
Now set for both of then border-left and border-right.
div{
height:100px;
width:100px;
border:solid 1px;
position:relative;
}
.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO :BEFORE :AFTER FLEXIBLE

Answer 2

I'm not sure you can do that with normal way, a little hack may be help.
What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.
HTML:
<div class="box1">
<div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS:
.box1-fake{
background-color:#00d8ff;
position:absolute;
left: -1px;
top: -1px;
z-index: 1000;
width: 50%;
border-right: 0 none;
}

Answer 3

You could use clip on a pseudo element after the first box to get this working:
.box1:after {
content: "";
border:solid 1px;
background: #00d8ff;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
clip: rect(76px 32px 102px -1px);
}
FIDDLE
For more information about the css clip property see this mozilla page
It also has cross browser support

Answer 4

Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.

Answer 5

How about somethign like this:
<div class="box2">
<div class="box-top"></div>
<div class="box-bot"></div>
</div>
## css ##
.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}
.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}
.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}
http://jsfiddle.net/a8fXP/30/