Ways to align two elements within the same level in the DOM?

Question

Ways to align two elements within the same level in the DOM?

Is it really impossible to have two elements render parallel to each other on the z-axis? Even with the same z-index, they are treated as being on different levels based on their order in the DOM. This can be a challenge when trying to display nearby elements with box shadow that should not overlap.

What is preventing the browser from rendering elements with the same z-index at the same level? Is there a workaround for this issue?

I am currently working on a website where this problem arises, specifically in a design featuring two boxes floating next to each other but should be at the same level without casting shadows onto each other:

html css dom

Answer 1

Answer №1

To achieve a desired background color, you can add an inner wrapper block element.

<div class="container">
    <div class="row">
        <div class="col pull-left">xxx</div>
        <div class="col pull-right">yyy</div>
    </div>
</div>

.col{
    width:50%;
    box-shadow: 0 0 10px #222;
}

When applying box-shadow to div.col, one block's shadow area may overlap the other, especially with the use of Bootstrap's .pull-left and .pull-right classes for floating effects.

To address this issue, you can insert a wrapper within each column:

<div class="container">
    <div class="row">
        <div class="col pull-left"><div class="wrapper">xxx</div></div>
        <div class="col pull-right"><div class="wrapper">yyy</div></div>
    </div>
</div>

.wrapper{
    width:100%;
    position:relative;
    z-index:99;
    background:#fff;
}

This modification ensures that the overlapped shadow is covered by the inserted div.wrapper.

For a visual demonstration, check out this JSFiddle link.

Answer 2

To achieve a desired background color, you can add an inner wrapper block element.

<div class="container">
    <div class="row">
        <div class="col pull-left">xxx</div>
        <div class="col pull-right">yyy</div>
    </div>
</div>

.col{
    width:50%;
    box-shadow: 0 0 10px #222;
}

When applying box-shadow to div.col, one block's shadow area may overlap the other, especially with the use of Bootstrap's .pull-left and .pull-right classes for floating effects.

To address this issue, you can insert a wrapper within each column:

<div class="container">
    <div class="row">
        <div class="col pull-left"><div class="wrapper">xxx</div></div>
        <div class="col pull-right"><div class="wrapper">yyy</div></div>
    </div>
</div>

.wrapper{
    width:100%;
    position:relative;
    z-index:99;
    background:#fff;
}

This modification ensures that the overlapped shadow is covered by the inserted div.wrapper.

For a visual demonstration, check out this JSFiddle link.

Answer 3

Answer №2

Here is a neat trick I just came up with:

To create the illusion of box shadows, make duplicate elements for each element that requires a shadow. Position these duplicates at a lower z-index compared to the original elements.

#shadow_layer{
  position:absolute;
  z-index:1;
}
#element_1, #element_2{
  background-color:blue;
  margin:10px;
  width:75px;
  height:75px;
}
#element_1_shadow, #element_2_shadow{
  box-shadow:0px 0px 20px 0px #666;
  margin:10px;
  width:75px;
  height:75px;
}

<div id="shadow_layer">
  <div id="element_1"></div>
  <div id="element_2"></div>
</div>
<div id="shadow_layer">
  <div id="element_1_shadow"></div>
  <div id="element_2_shadow"></div>
</div>

Answer 4

Here is a neat trick I just came up with:

To create the illusion of box shadows, make duplicate elements for each element that requires a shadow. Position these duplicates at a lower z-index compared to the original elements.

#shadow_layer{
  position:absolute;
  z-index:1;
}
#element_1, #element_2{
  background-color:blue;
  margin:10px;
  width:75px;
  height:75px;
}
#element_1_shadow, #element_2_shadow{
  box-shadow:0px 0px 20px 0px #666;
  margin:10px;
  width:75px;
  height:75px;
}

<div id="shadow_layer">
  <div id="element_1"></div>
  <div id="element_2"></div>
</div>
<div id="shadow_layer">
  <div id="element_1_shadow"></div>
  <div id="element_2_shadow"></div>
</div>

Ways to align two elements within the same level in the DOM?

Answer №1

Answer №2

Similar questions

Tips for transitioning from custom CSS to Material UI's CSS in JS

I need to adjust the alignment of the text within my list item that includes a time element

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Trouble with connecting CSS files

Unable to successfully submit a form using PHP

Sometimes, the page-wide background in Internet Explorer doesn't load properly

Trigger jQuery to play audio files

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

the click event fails to trigger when the id or class is modified

Generating forms dynamically with Vuetify

Pattern for identifying Google Earth links with regular expressions

Transforming Symbol Characters into HTML Using VB.NET

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

What is the reason behind this Uncaught TypeError that is happening?

Having issues when dynamically adding options to a multiselect dropdown

Trouble getting proper alignment displayed with JavaScript and CSS