Switching the default z-index for child elements within an HTML container

Question

Switching the default z-index for child elements within an HTML container

According to the specification, elements are typically drawn "in tree order" for in-flow, non-positioned elements of similar block level or float status and identical z-index. This means that elements declared last in the HTML markup appear on top. But what if we need to reverse this order for specific children within a container?

For example, imagine having multiple overlapping floated divs within a parent div:

__________________________________
|  _________________________      |
|  | samant| allis| rachael |...  |
|  |_______|______|_________|...  |
|_________________________________|

And we actually want it to be displayed like this:

__________________________________
|  _________________________      |
|  | samantha | lison | chael |...  |
|  |__________|______|_______|...  |
|_________________________________|

You can view an example here.

If CSS alone does not offer a solution for achieving this effect, what would be the most efficient and secure way to implement this functionality using JavaScript for arbitrary child elements?

Similar questions have been asked before regarding reversing z-index based on page render order, such as this one and this one.

javascript html css z-index

Answer 1

Answer №1

In order to achieve this effect in JavaScript, one approach is to select all elements using the querySelectorAll method, then iterate through them using forEach, and adjust the z-index based on the element count and current index:

var elems = document.querySelectorAll(".container2 .floater");
Array.prototype.forEach.call(elems, function(e, i) {
    e.style.zIndex = elems.length - i;
});

.container2 {
    border: 3px solid teal;
    padding: 2em;
    display:inline-block
}

.container2 .floater {
    border: 1px solid gray;
    background: #444;
    color: white;
    float: left;
    padding: 1em;
    margin: -1em;
    position: relative;
}

<div class="container2">
    <div class="floater">Item 1</div>
    <div class="floater">Item 2</div>
    <div class="floater">Item 3</div>
    <div class="floater">Item 4</div>
    <div class="floater">Item 5</div>
    <div class="floater">Item 6</div>
</div>

Answer 2

In order to achieve this effect in JavaScript, one approach is to select all elements using the querySelectorAll method, then iterate through them using forEach, and adjust the z-index based on the element count and current index:

var elems = document.querySelectorAll(".container2 .floater");
Array.prototype.forEach.call(elems, function(e, i) {
    e.style.zIndex = elems.length - i;
});

.container2 {
    border: 3px solid teal;
    padding: 2em;
    display:inline-block
}

.container2 .floater {
    border: 1px solid gray;
    background: #444;
    color: white;
    float: left;
    padding: 1em;
    margin: -1em;
    position: relative;
}

<div class="container2">
    <div class="floater">Item 1</div>
    <div class="floater">Item 2</div>
    <div class="floater">Item 3</div>
    <div class="floater">Item 4</div>
    <div class="floater">Item 5</div>
    <div class="floater">Item 6</div>
</div>

Answer 3

Answer №2

If you want to make the elements in the document tree overlap, simply reverse their order using CSS.

By utilizing techniques such as:

Flexible boxes:

wrapper {
  display: flex;
  flex-direction: row-reverse; /* or `column-reverse` */
  justify-content: flex-end;
}

ul {
  display: flex;
  list-style: none;
  padding: 0 0 0 1em;
}
ul.reversed {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
li {
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Floating elements:

wrapper {
  float: left;
  clear: both;
}
item {
  float: right;
}

ul {
  list-style: none;
  float: left;
  clear: both;
  padding: 0 0 0 1em;
}
li {
  float: left;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed > li {
  float: right;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Direction:

wrapper {
  direction: rtl;
  text-align: left;
}
item {
  direction: ltr;
}

ul {
  list-style: none;
  padding: 0 0 0 1em;
  text-align: left;
}
li {
  display: inline-block;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed {
  direction: rtl;
}
ul.reversed > li {
  direction: ltr;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Answer 4

If you want to make the elements in the document tree overlap, simply reverse their order using CSS.

By utilizing techniques such as:

Flexible boxes:

wrapper {
  display: flex;
  flex-direction: row-reverse; /* or `column-reverse` */
  justify-content: flex-end;
}

ul {
  display: flex;
  list-style: none;
  padding: 0 0 0 1em;
}
ul.reversed {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
li {
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Floating elements:

wrapper {
  float: left;
  clear: both;
}
item {
  float: right;
}

ul {
  list-style: none;
  float: left;
  clear: both;
  padding: 0 0 0 1em;
}
li {
  float: left;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed > li {
  float: right;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Direction:

wrapper {
  direction: rtl;
  text-align: left;
}
item {
  direction: ltr;
}

ul {
  list-style: none;
  padding: 0 0 0 1em;
  text-align: left;
}
li {
  display: inline-block;
  border: 1px solid;
  margin-left: -1em;
  background: #fff;
}
ul.reversed {
  direction: rtl;
}
ul.reversed > li {
  direction: ltr;
}

<ul>
  <li>Samantha</li>
  <li>Allison</li>
  <li>Rachael</li>
</ul>
<ul class="reversed">
  <li>Rachael</li>
  <li>Allison</li>
  <li>Samantha</li>
</ul>

Answer 5

Answer №3

If you're looking to mix up your layout, consider experimenting with the latest flex boxes. Try using: display: inline-flex; flex-direction: column-reverse;

Answer 6

If you're looking to mix up your layout, consider experimenting with the latest flex boxes. Try using: display: inline-flex; flex-direction: column-reverse;

Switching the default z-index for child elements within an HTML container

Answer №1

Answer №2

Answer №3

Similar questions

Saving fonts when deploying on Vercel with Next.js is not supported

Dynamically insert textboxes into a form by leveraging the power of the Jade template engine

Setting up SKPM (Sketch Plugin Manager) using npm

JavaScript code returning the correct result, however, it is unable to capture all characters in the returned string

What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

What is the process for setting up custom HTML tags in Resharper?

Attempting to implement image switching with hover effects and clickable regions

Tips for implementing a search function with DynamoDB using the "contains" operator

Adjust the alignment of two headers with varying sizes

What is the best way to substitute unpredictable dynamic variables on-the-fly?

Angular.js enables seamless synchronization between contenteditable elements and the $scope object by automatically updating the

Struggling to make a form submit work with AngularJS and a Bootstrap datetime picker

The data is not being displayed in the table

Transferring UTM parameters to a different page via a button click

What is the best way to verify the existence of an email address?

Problem with parsing JSON in a mixed array

Successive pressing actions

Control your thumbnails with the powerful iDangerous Swiper feature

The graphic is displayed at a width of 50%

The Script Component is not functioning properly in next.js