25

I am stuck here. Please help. I want to make the following through css.four layers

But when I use CSS positioning, I am getting this output enter image description here

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.

raghuveer999
  • 699
  • 1
  • 8
  • 24

5 Answers5

22

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.

enter image description here

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

enter image description here

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

enter image description here

Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
5

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;
}
Iqbal Fauzi
  • 1,561
  • 11
  • 12
  • Yours is simple and effective. But one problem. When I add text to div box1 It is not visible because of z-index of fake div. Can you give any suggestion for this? – raghuveer999 Mar 23 '14 at 11:11
4

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

enter image description here

For more information about the css clip property see this mozilla page

It also has cross browser support

Danield
  • 121,619
  • 37
  • 226
  • 255
3

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

Mecki
  • 125,244
  • 33
  • 244
  • 253
Mukesh Soni
  • 1,119
  • 3
  • 13
  • 23
  • 1
    This is a comment, not an answer. – Ashley Medway Mar 23 '14 at 09:33
  • 2
    @AshleyMedway This is not a comment at all, it is a perfectly valid answer, that also works (there is just no code given, but that is not required by SO) – Mecki Mar 23 '14 at 14:17
  • @Mecki Saying try something, with no example, explanation or linked resource is not an answer. – Ashley Medway Mar 23 '14 at 15:49
  • 1
    @AshleyMedway Samples and explanations have never been required on SO. What Mukesh posted is a perfectly working solution that also solves the problem. And it plays no role if he uses the phrase "Try" or not; but if you have such a huge problem with that word, let me remove it for you. – Mecki Mar 23 '14 at 16:52
2

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/

Edward
  • 3,061
  • 6
  • 32
  • 52