Absolute positioning inside relative positioning?

css

Solution

A good example would be when you want to position something to the page or "relative" to a container/div.

Here is my Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

This shows you that without the absolute div being inside of a "relative" div, the contents are aligned to the document body.

Notice that the green div (`#box1`), which has `position: relative`, the div inside (`#inner1`) it is aligned top/right INSIDE of `#box1`.

The blue box (`#box2`), which has the exact same HTML layout as the green box (`#box1`), does NOT include `position: relative` and notice that the div inside it (`#inner2`) is aligned to the top/right of the `body`

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

Here is a good article about it from Chris Coyier...

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Source: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Problem

According to W3Schools (http://www.w3schools.com/css/css_positioning.asp): Relatively positioned elements are often used as container blocks for absolutely positioned elements. Why is this? Is there a good example?

Original source