CSS，为什么这些div彼此叠放？

Question

Basicly I would like these 4 buttons to seperate with a width of 5px between them? When I had my position as relative it worked fine but when I put it to absolute they each pile on top of each other? Why is this and does anyone know a fix? Thanks.

Code:

#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;
}

Example (Buttons in the top left.):

Answer 1

From the 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.

They are piling up on top of each other because no space is reserved for them in the flow of the page.