html - CSS，为什么这些 div 会堆叠在一起？

Question

基本上我希望这 4 个按钮以 5px 的宽度分开？当我的位置是亲戚时，它工作得很好，但是当我把它放在绝对位置时，它们各自堆叠在一起？为什么会这样，有人知道解决方法吗？谢谢。

代码:

#content
{
    position: absolute;
    top: 220px;
    left: 505px;
    width: 860;
    height: 560px;
}

#content ul li
{
    text-decoration: none;
    position: absolute;
    margin-right: 2px;
    font-family: "Arial Black";
    padding: 10px;
    width: 180px;
    text-shadow: 1px 1px 1px #000;
    text-align: center;
    background-color: #000;
    opacity: 0.5;
    display: block;
}

示例(左上角的按钮。):

Answer 1

来自MDN page on positioning :

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

它们相互堆叠，因为在页面流中没有为它们保留空间。