How to position absolute inside a div?

Question

I\'m having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image:

Inside the black (#box) di

Answer 1

1. First all block level elements are postioned static to the 'document'. The default positioning for all elements is position: static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.
2. Relative position: If you specify position: relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
3. When you specify position: absolute, the element is removed from the document and placed exactly where you tell it to go.

So in regard to your question you should position the containing block relative, i.e:

#parent {
  position: relative;
}

And the child element you should position absolute to the parent element like this:

#child {
  position: absolute;
}

---

See: Learn CSS Positioning in Ten Steps