CODEWITHSUNDEEP
htmlcss
user3255328
user3255328

Reputation:

CSS, why are these div's piling on top of each other?

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.): enter image description here

Upvotes: 0

Views: 1817

Answers (1)

wec
wec

Reputation: 235

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.

Upvotes: 1

Related Questions