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：

  

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先定位。如果定位的祖先不存在，则使用初始容器。

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