Как перекрывать добавленные элементы li в CSS - PullRequest
Новая
       25

Как перекрывать добавленные элементы li в CSS

0 голосов
/ 21 мая 2019

Я создал несколько кнопок, которые при нажатии, добавлении и удалении элементов li, содержащих изображения, в родительском элементе ul.

Поскольку эти элементы 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 будут добавлены в каком порядке пользователем, поэтому любые статические или числовые значения не будут работать, я думаю.

Если кто-то может помочь, проверяетсообщение.

1 Ответ

0 голосов
/ 21 мая 2019

Как это: 

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 = "tomato" неверен, если у вас более одного элемента.

...