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

css - Showcasing images with a horizontal scrollbar

Two tables arranged in a nested grid layout

Trigger the datepicker to open by clicking anywhere within the TextField in MUI

What is the best way to align a dropdown menu and a textbox on the same line

How come the focus doesn't work when altering the CSS code simultaneously?

Navigation that remains fixed while scrolling

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

Utilize MySQL to populate highcharts with data

Issue with automatic compiling in Sublime 2 for less2css

Text not perfectly centered on the page

Design an HTML button/label with text and a starting width of zero

What could be causing the incorrect execution of this MySQL update within PHP?

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Tips for preventing the impact of angular mat-panel position changes on matdialog

Showing information from page's table using find_element_by_xpath (Selenium with Python)

Tips on appending a parameter to an image URL using JavaScript

Struggle with uploading images in codeigniter

Converting HTML to plain text using the DOMDocument class

JavaScript is submitting an incorrect HTML form

Struggling with React Js and need some assistance?