Default z-index call for child elements in an HTML element

Question

So, spec determines that the elements are drawn "in tree order" for the stream, positional elements with the same level of block or float and identical z-index . This, of course, means that the last declared HTML in the markup is drawn on top. But what if we want this order to be canceled for arbitrary children in a specific container?

For example, let's say we have an indefinite number of overlapping float div in the parent div :

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

So we want it to look like this:

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

jsfiddle

Is there another way to achieve this with css? If not, what is the most efficient and safest way to achieve this functionality with javascript for arbitrary children?

Questions were asked earlier for similar functions, but not specifically for use in a general sense with an arbitrary number of children. See here and here .

Answer 1

You can reorder the items in the document tree so that they overlap as you want.

Then reverse the order with CSS to put them back in position.

This can be achieved, for example, with

• Flexible blocks :

   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 2

A simple javascript solution is to get all the elements using querySelectorAll , then forEach and set the z-index to the element counter - the 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

You can try new flexible boxes. display: inline-flex; flex-direction: column-reverse;