如何在 CSS 中重叠附加的 li 项目

Question

我创建了许多按钮，当单击这些按钮时，会在 ul 父级中附加和删除包含图像的 li 项。

由于这些 li 项目在 html 中不是静态的，因此用户可以根据单击按钮的顺序以任何顺序添加它们。基本上是 DOM 元素的添加和删除。

$(function() {
$(".addToms").click(function () {
    if ($("li").is('#tomato'))
       $("li").remove('#tomato');     
    else
        $("ul").prepend('<li class="centerUL" id="tomato"><img src="tomato.jpg"></li>');
    });
});

$(function() {
$(".addLettuce").click(function () {
    if ($("li").is('#lettuce'))
       $("li").remove('#lettuce');    
    else
        $("ul").prepend('<li class="centerUL" id="lettuce"><img src="lettuce.jpg"></li>');
    });
});

效果很好。

<div class="addToms">tomato</div>
<div class="addLettuce">lettuce</div>

<ul class="centerUL">

</ul>

我的问题是如何重叠这些动态创建的包含图像的列表项？？

我了解 z-index 的概念是如何工作的，但我无法为每个 li 项目设置静态位置，因为我不知道用户将按什么顺序添加哪些 li 项目，所以任何静态或数字我猜值设置不起作用。

如果有人可以提供帮助，请在帖子中查看。

Answer 1

像这样：

ul.centerUL {
   position: relative;
}

这会将您的<UL> 设置为原点。

.centerUL li {
   position: absolute;
   top: 0;
   left: 0
}

这将定位您的<LI>

如果您想独立定位您的 LI，您可以在创建它们时为它们内联样式：

$("ul").prepend('<li style="'+ someCounter +px'" id="tomato"><img src="tomato.jpg"></li>');

请注意，ID 应该是唯一的，如果您有多个元素，则您的 id="tomato" 是错误的。