用于重复重复组件的动态 z-index答案

【问题标题】：Dynamic z-index for repeating duplicate Components用于重复重复组件的动态 z-index
【发布时间】：2020-12-23 19:02:28
【问题描述】：

目前我的应用程序非常动态。我们得到一个组件列表，并把它一个一个地插入到 DOM 中，不再重复。组件的顺序并不总是相同。

我有一个奇怪的边缘情况，如果插入了 4 个文档小部件

如果它们被切换，添加图标仍然在顶部

这是“X”图标的样式

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

我可以通过减少每个“X”图标的 z-index 来手动修复。前任。 200、199、198、197

请问如何正确实现z-index，以便组件每次出现在DOM中时z-index都会递减

这里的小例子 http://jsfiddle.net/f8jn04tb/1/

【问题讨论】：

您是否使用Array.prototype.map() 来渲染这些？
您要准确归档什么订单？您只想让面板位于“X”图标上方，还是想让面板之间也有特定的顺序？
@Reizo 我需要它递减。第一个有 200 个，第二个有 199 个。
您不一定需要设置 z-index 来归档您想要的内容。因此，我要问的是你的实际目标（见XY-Problem）。
@Reizo 顺序无关紧要。我在帖子中已经说过，组件的顺序并不总是相同。我想要实现的是每次重复时 z 索引减少的元素。如果您有更好的解决方案的建议，我正在倾听。

标签： html css reactjs

【解决方案1】：

这是一个我认为您想要实现的工作示例。计算您拥有的图标，设置一个开始倒计时的变量，遍历图标容器以设置从您的倒计时变量倒计时的 z-index。

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>

【讨论】：