如何正确显示 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 放在相对于其父级的绝对位置上。这意味着所有位置都将位于同一位置，重叠...