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

Surprising outcomes when using Mongoose

Navigating variable columns and rows in a static column table

What causes the _.sum() function in lodash to not work with objects in Vuejs?

Can someone clarify the meaning of (e) in Javascript/jQuery code?

Enhancing the security of various components by utilizing secure HTTP-only cookies

Modify the contents of a textbox by editing the text as you type

Send information from Node.js to the webpage and populate designated elements (search by either ID or class) on the webpage

What is the best way to integrate a notification system using jQuery?

Extract a specific pattern from a string using Javascript

Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

What is preventing my cookie from being saved?

Why is this loop in jQuery executing twice?

Converting a Class Component to a Functional Component: Step-by-Step Guide

Tips on including the Elastic Search JavaScript client library in Node.js controller files

The Quirks of jQuery's .load() Method

Troubleshooting Problems with Deploying Next Js on Firebase

Dynamic Label Editing on ASP Page Using Master Page

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

Retrieving data from a React state in one component and utilizing it in a separate component

Is gulp.dest set to match the current file?