I want to reverse the z-index of my website, so that objects with lower z-index are on top of objects with higher z-index - is there a solution for this ?

CodePudding user response：

I don't know of any standard solutions, but you can always write a custom function to do it. Check if this works for you:

document.querySelector('button').addEventListener('click', reverseZIndex);

function reverseZIndex(){
  // Get all body elements
  Array.from(document.body.querySelectorAll('*'))

  // Reverse those that have z-index
  .forEach((elem, idx) => {
    const zIndex = window.getComputedStyle(elem).getPropertyValue('z-index');
    if (zIndex !== 'auto' && zIndex != 0) {
      elem.style.zIndex = zIndex * -1;
    }
  })
}

button {
  margin-bottom: 10px;
}

.container {
  position: relative;

}

.z {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
}

.z1 {
  z-index: 1;
  background-color: green;
  top: 0;
}

.z2 {
  z-index: 2;
  background-color: blue;
  top: 20px;
  left: 5px;
}

.z3 {
  z-index: 3;
  background-color: yellow;
  top: 40px;
  left: 10px;
}

.z4 {
  z-index: 4;
  background-color: grey;
  top: 60px;
  left: 15px;
}

.z5 {
  z-index: 5;
  background-color: red;
  top: 80px;
  left: 20px;
}

<button>Reverse z-index</button>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

One method that might work for your case is to dynamically, re-write the style sheet(s) using javascript.

Style sheets are html elements like any other and live references to them can be made using:

styleSheets = document.getElementsByTagName('style');

this creates a live html collection (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName). If you have a single style sheet it is referenced in index[0], additional style sheets have incremented indices. Cricially, the innerHTML of the collection can be modified as for any other element and, because the reference is 'live', changes to it are automatically applied to the html tree displayed in the browser.

The following example takes the innerHTML of the style sheet and splits it into an array of lines. Array.map is used to examine each line for the presence of a z-index rule. If present, the numerical value following it is extracted and multiplied by -1 so the largest value becomes the smallest and vice versa. Other lines are left unaltered. The check and multiplication is performed using a ternary operator conditional, but you could equally loop through the lines with a for loop.

The results of the mapping are joined as new lines and the resulting string used to replace the innerHTML of the style sheet. This working snippet applies a custom reverseZ function to the style sheet each time the page is clicked. If you have several style sheets, interation through the collection will achieve the same result.

document.addEventListener('click', reverseZ);
const styleSheet = document.getElementsByTagName('style')[0];

function reverseZ() {
const lines = styleSheet.innerHTML.split("\n");
const newLines = lines.map(line => {

 return (line.indexOf('z-index') > -1) ? `z-index: ${parseInt(line.slice(line.indexOf(':') 1, line.indexOf(';')))*-1};`: line;

});

styleSheet.innerHTML = newLines.join("\n");


} // end function reverseZ

div {
position: absolute;
width: 100px;
aspect-ratio: 1;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}

.red {
background: red;
z-index: -100;
top: 0;
left: 0;
}
.orange {
background: orange;
z-index: -70;
top: 20px;
left: 20px;
}
.yellow {
background: yellow;
z-index: -10;
top: 40px;
left: 40px;
}
.green {
background: green;
z-index: 0;
top: 60px;
left: 60px;
}
.blue {
background: blue;
z-index: 20;
top: 80px;
left: 80px;
}
.indigo {
background: indigo;
z-index: 50;
top: 100px;
left: 100px;
}
.violet {
background: violet;
z-index: 100;
top: 120px;
left: 120px;
}

<div >click</div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div >click</div>