Why is this absolutely positioned element not positioning relative to its container?

Question

I have this simple code to place two div #container elements side by side. In each of these there is a child div #child which I would like to position

Answer 1

To position the child relative to its parent, just add position:relative to the PARENT'S style - then all children with position:absolute will be absolute relative to the parent.

.container {
    float:left;
    margin-right: 10px;
    position:relative;
}

Answer 2

Absolutely positioned elements are positioned with respect to the edges of their containing block, which is defined as the first ancestor that is not position: static.

None of the ancestor elements are position: static, so it is with respect to the initial position of the viewport.

Set position: relative on the .container elements if you really want to absolutely position them.

That said, it looks like you would be better off doing this instead:

.child {
    margin-left: 0.2ex;
}