Unable to discover a method to accomplish this task

Question

Unable to discover a method to accomplish this task

Greetings to the Stack Overflow community!

I have a scenario with two div blocks containing images of dimensions 1280px width and 700px height each.

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

The second block also contains a div of the same size, floating right. The issue arises from the transparency at the bottom of the first block's image, about 10%.

On the other hand, the top of the second block's image is transparent by 10%. To connect them, I used margin-top on the second image. However, I am unable to hide these divs with a height of 100% beneath them. I attempted to use z-index, but it only hides one of the divs.

For a better understanding, please refer to this JSFiddle example: https://jsfiddle.net/c7m6pm4w/. In the JSFiddle, you will observe that the green and aqua sections are under the blue one. My goal is to have div.three (aqua) on top of div.four (blue) but beneath div.one (red), while div.two (green) should be on top of div.one (red) but beneath div.four (blue).

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

Here is a visual representation of the scenario: https://i.sstatic.net/9oIEL.png

html css

Answer 1

Answer №1

In order to grasp your concept, I had to create some labeled paper stickers (the image in the original question was added later). From what I gather, you are looking for something similar to this:

https://i.sstatic.net/ylZOF.jpg

Unfortunately, achieving this using CSS, particularly with z-indexes, is not possible. Here's a breakdown:

zi4 < zi3 < zi1
zi1 < zi2 < zi4

zi4 < zi1
zi1 < zi4

Impossible.

While you can create the illusion of four overlapping items by using a fifth div colored like the first one, there is no practical reason for creating such an inconsistent and unsupported HTML structure. Hence, there is no conventional solution.

For further insight, you may refer to this related SO question, which includes an example of the "illusion" technique.
I have also prepared a JSFiddle specific to your scenario.

Answer 2

In order to grasp your concept, I had to create some labeled paper stickers (the image in the original question was added later). From what I gather, you are looking for something similar to this:

https://i.sstatic.net/ylZOF.jpg

Unfortunately, achieving this using CSS, particularly with z-indexes, is not possible. Here's a breakdown:

zi4 < zi3 < zi1
zi1 < zi2 < zi4

zi4 < zi1
zi1 < zi4

Impossible.

While you can create the illusion of four overlapping items by using a fifth div colored like the first one, there is no practical reason for creating such an inconsistent and unsupported HTML structure. Hence, there is no conventional solution.

For further insight, you may refer to this related SO question, which includes an example of the "illusion" technique.
I have also prepared a JSFiddle specific to your scenario.

Answer 3

Answer №2

One simple approach that comes to mind is to divide everything 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;
}

(You will need to adjust the widths and heights of each cell and add additional cells for the borders.)

Why not give it a try?

Answer 4

One simple approach that comes to mind is to divide everything 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;
}

(You will need to adjust the widths and heights of each cell and add additional cells for the borders.)

Why not give it a try?

Unable to discover a method to accomplish this task

Answer №1

Answer №2

Similar questions

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

Is the button failing to direct you to the intended destination?

What can I do to prevent the border from breaking apart when I zoom in?

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

HTML form not compatible with POST method in MVC

Angular2 poses a strange problem with ngClass

The AngularJS component materializes almost instantaneously

VueJs and the behavior of styling elements with inline CSS

Steps for eliminating the overlay on top of the padding region

Using AJAX to dynamically populate PHP form inputs from HTML

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Issue with navigator.geolocation.getCurrentPosition not functioning again on Firefox

Image container unable to resize to fit within a CSS grid cell

Display only alphabetic characters in the text field

Enhanced spacing of characters in website text

How can I make my webpage unselectable except for specific content within a div using CSS and JavaScript?

Embedding HTML in a Xamarin Forms Label

JavaScript expression not being processed

Utilize the grid system from Bootstrap to style HTML div elements

Every time I click the highlight button, my navbar link inexplicably shrinks