Как правильно отображать div

Question

https://jsfiddle.net/qz8hL574/1/

for (var key in table) {
    if (table.hasOwnProperty(key)) {
        $('<div class="element"></div>').appendTo('#list');
        document.getElementsByClassName("element")[key].innerHTML = table[key].symbol;
    }
}

Вот так заполняется div.

Мой код там. Когда я запускаю его локально, я получаю это http://prntscr.com/knwyh0 Что означает, что единственный отображаемый элемент является последним. Все div есть и правильно заполнены значениями от объекта, но если я даю z-index, равный 100, случайному, он не идет сверху и не отображается. Я хотел бы видеть их в одной колонке по центру по горизонтали. Есть идеи как это исправить?

Answer 1

Не знаю точно, что вы имеете в виду .. Но может быть что-то вроде этого?

#list {
    width: 100vh;
    height: 100vh;
    position: relative;
}


#list .element {
    height: 50px;
    width: 100px;
    position: relative;
    display: block;
    margin: auto;
    background-color: red;
    margin-bottom: 20px;
}

абсолютная позиция, которую вы использовали, помещает элементы div в абсолютную позицию относительно родительской. Это означает, что все будут в одном месте, перекрывая друг друга ...