Как сделать наложение элементов друг на друга?

Question

[bimka]

Необходимо в блоке на подложку из логотипа магазина наложить название этого магазина. При использовании li.innerHTML два раза (сначала для картинки, потом названия) последнее название магазина изменяет все содержимое блока.

function rendering_markets_list(markets) {
    // функция создает ненумерованный список с магазинами
    let div  = document.getElementById('markets');
    let ul = document.createElement('ul');
    div.appendChild(ul);

    for (let i = 0, ln = markets.length; i < ln; i++) {
        let li = document.createElement('li');
        img_src = markets[i].retailer.appearance.logo_image;
        li.innerHTML = "<img src=\"" + img_src + "\" width=\"300px\" height=\"100px\">";
        li.innerHTML = markets[i].name;
        li.setAttribute('id', markets[i].id);
        ul.appendChild(li);
    }
}

Как наложить название магазина на картинку?

Answer 1

[Rst0]

добавить, а не заменить innerHTML : +=

li.innerHTML = "<img src=\"" + img_src + "\" width=\"300px\" height=\"100px\">";
li.innerHTML += '<div class="name" style="position: absolute;">'+markets[i].name+'</div>';

далее через CSS
.name{ }