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

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/