CODEWITHSUNDEEP
htmlcss
McLaren
McLaren

Reputation: 776

Cant find a way to do this

Hello Stack Overflow community.

I've got two div blocks. Which are images with width 1280px and 700px height.

In first block there is div with 100% height and 400px width floating left.

And in the second block there same size div but floating right. Problem is that the first block picture is png and her bottom is transparent about 10%.

Second block picture top is transparent 10%. I margin-top second picture to join them. And now i can't hide these divs with height 100% under them. I've tried using z-index but it hides only one.

So here is the jsfiddle example: https://jsfiddle.net/c7m6pm4w/ in this jsfiddle you can see that green and aqua is under blue. So how can I make that div.three(aqua) would be on div.four(blue) but under div.one(red). And div.two(green) would be on div.one(red), but under div.four(blue)?

<div class="one">
  <div class="two"></div>
</div>
<div class="four">
  <div class="three"></div>
</div>

Here is the example of how it look like: enter image description here

Upvotes: 0

Views: 67

Answers (2)

Little Santi
Little Santi

Reputation: 8783

Simplest aproach that comes to my mind is to split it all into a nine-cells grid:

HTML:

<div id="b11" class="cell"> </div>
<div id="b12" class="cell"> </div>
<div id="b13" class="cell"> </div>
<div id="b21" class="cell"> </div>
<div id="b22" class="cell"> </div>
<div id="b23" class="cell"> </div>
<div id="b31" class="cell"> </div>
<div id="b32" class="cell"> </div>
<div id="b23" class="cell"> </div>

CSS:

div.cell {
    height: 100px;
    width: 150px;
}
#b11 {
    background-color: green;
    float: left;
}
#b12 {
    background-color: red;
    float: left;
}
#b13 {
    background-color: red;
    xfloat: left;
}

#b21 {
    background-color: green;
    float: left;
}
#b22 {
    background-color: white;
    float: left;
}
#b23 {
    background-color: aqua;
    xfloat: left;
}

#b31 {
    background-color: blue;
    float: left;
}
#b32 {
    background-color: blue;
    float: left;
}
#b33 {
    background-color: aqua;
    xfloat: left;
}

(Of corse, you have to "tune" the individual widths and heights, and also add some extra cells for the borders.)

Why not?

Upvotes: 0

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

I had to make some labeled paper stickers in order to understand what you mean (the image in an original question has been added later). As far as I have understood, you want something like this:

enter image description here

No, you cannot do this using CSS. At least, using z-indexes.

zi4 < zi3 < zi1
zi1 < zi2 < zi4

zi4 < zi1
zi1 < zi4

Impossible.

You can create an illusion of four items overlapping each other using the fifth div colored as the first one. However, there is really no normal reason of creating such an inconsistent, unsupportable HTML; that's why there is no normal solution.

Here is the good related SO question with an example of "illusion".
Also, I have implemented a JSFiddle for your case.

Upvotes: 4

Related Questions