Dynamic z-index for repeating duplicate Components

user_3276954 0
Viewed 173

At the moment my application is very dynamic. We get a list of components and insert it into the DOM one by one, it's not a repeat. The components aren't always in the same order.

I have an odd edge case where if 4 document widgets are inserted

enter image description here

And if they are toggled, the add icon remains at the top

enter image description here

This is the style 'X' icon has

element.style {
    position: absolute;
    margin: -10px;
    z-index: 200;
    width: auto;
    inset: 0px 0px auto auto;
}

I am able to manually fix by decrementing z-index of each 'X' icon after. EX. 200, 199, 198, 197 enter image description here

May I ask how do I properly implement the z-index so that the component z-index decrement each time it appears in the DOM

Small Example here http://jsfiddle.net/f8jn04tb/1/

reactjs css html
1 Answers

Here's a working example of what I think is what you're wanting to achieve. Count the icons you have, set a variable of a starting amount to countdown from, loop through the icons containers to set the z-index counting down from your countdown variable.

let $iconCount = $('.container > ul > li').length,
    $startingAmount = 200;
for(let i = $iconCount; i > 0; i--) {
    $('.container > ul > li:nth-child('+i+')').css('z-index',($startingAmount+1)-i);
}
.container > ul > li {
    list-style-type: none;
    position: relative;
    width: 60px;
    font-family: sans-serif;
    height: 40px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}
.container > ul > li .popup {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    left: 100%;
    width: 300px;
    top: 0;
}
.container > ul > li .close {
    display: block;
    background-color: #1f81bd;
    color: white;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    text-align: center;

    position: absolute;
    right: 0;
    margin: -10px;
    z-index: 200;
    top: 0;
}
.container > ul > li:nth-child(1) {
    z-index: 1;
}
.container > ul > li:nth-child(2) {
    z-index: 2;
}
.container > ul > li:nth-child(3) {
    z-index: 3;
}
.container > ul > li:nth-child(4) {
    z-index: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
        <ul>
            <li>
                <span class="icon">Icon 1</span>
                <span class="close">X</span>        
                <div class="popup">
                    <ul>
                        <li>Sub item 11</li>
                        <li>Sub item 12</li>
                        <li>Sub item 13</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="title">Icon 2</span>
                <span class="close">X</span>        
                <div class="popup">
                    <ul>
                        <li>Sub item 21</li>
                        <li>Sub item 22</li>
                        <li>Sub item 23</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="icon">Icon 3</span>
                <span class="close">X</span>
                <div class="popup">
                    <ul>
                        <li>Sub item 31</li>
                        <li>Sub item 32</li>
                        <li>Sub item 33</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="icon">Icon 4</span>
                <span class="close">X</span>                
                <div class="popup">
                    <ul>
                        <li>Sub item 41</li>
                        <li>Sub item 42</li>
                        <li>Sub item 43</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

user_13246500
Related