如何正確顯示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 放在相對於其父級的絕對位置上。這意味着所有這些都將位於同一位置，重疊...