Reputation: 73938

Issue with order elements stack when z-index value is not applied

I have the following HTML structure

https://jsbin.com/yuqolejepo/edit?html,output

DIV Box7_NEW_1438065416596 is positioned as first item in the DOM but in the rendered HTML is displayed visually under DIV Box7

For my understanding;

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning. Source.

Now considering that all my elements have a non-static positioning (position:absolute) why the lowest down DOM at the same hierarchy level still appears visually positioned on top?

I found this part misleading:

...Elements with non-static positioning will always appear on top of elements with default static positioning

Could you please provide me a clarification?

PS: I do not need to fix this issue usingz-index, I would need an explanation. Thanks.

 <div data-dojo-attach-point="containerNode">
        <div class="Box" id="Box7_NEW_1438065416596" style="
                position: absolute;
                top: 240px;
                left: 40px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
        <div class="Box" id="Box7d" style="
                position: absolute;
                top: 300px;
                left: 150px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
        <div class="Box" id="Box7" style="
                position: absolute;
                top: 200px;
                left: 0px;
                transform: rotate(0deg);
                width: 100px;
                height: 100px;">
            <div data-dojo-attach-point="containerNode"></div>
        </div>
    </div>

.Box {
            position: absolute;
            background-color: mediumspringgreen;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid green;
            z-index: 1;
        }

Upvotes: 0

Answers (3)

Lika Nikanorova

Reputation: 11

Next blocks with the same z-index will always have bigger z-index, than the previous. That will be "virtual" z-index.

For Example:

DIV 1 have z-index: 1 and it have normal z-index 1;
DIV 2 have z-index: 1 but because prev have z-index 1, we got here z-index 1.2;
DIV 3 have z-index: 1 but because prev have z-index 1.2, we got here z-index 1.3.

PS: This simple explanation without difficulties. Not by specification

Upvotes: 0