如何在CSS

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”是错误的。