Relative + Absolute Positioning

The solution to the problem we had in the last example is to position the element that contains the absolute div.

.container {
position: relative;
}

.absolute-box {
position: absolute;
bottom: 194px;
left: 140px;
}

The position of the orange box was not changed in the CSS for this example. Instead, the containing div or the "parent" of the three boxes, was given a position: relative; Now the containing div is the parent instead of the body of the page.

The difference is the relationship to the surrounding elements. When you don't specifiy a relationship, then the browser chooses the body as the parent. When you make a containing element relative, you are telling the browser a different more specific relationship.



Real World Examples