Paradoxical effect for HTML <div>s using CSS

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; }