CSS Positioning, Absolute

Here are a few tips for absolute positioning with CSS:

1) Default Position
By default, if you don't give values for the top and left styles, they are set to show the element where it would normally be displayed on the page.

2) Position Relative to a Parent
The element is positioned relative to a parent container. By default, the container is the browser window, but if a parent element has position: relative or absolute set on it, then that will act as the parent for positioning coordinates for its children.

3) Centering an Absolute Element
Here's one way to do it:

#absolute_centered {
height: 100px;
width: 140px;
border: 1px solid #333;
background-color: #CCC;

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -70px;
}

The div is given a position of 50% top and left. This positions the div's top left corner in the very center of it's parent container (see point #2).

Using margins to further position the div, we set "margin-top: -50px;" 50px is half the height of the div. The left margin is set in the same fashion.

This places the div in the center of the parent container.

Read More