how to position divs within another div

Question

I want to position divs within another div. Here's the relevant snippet of css (full example on cssdesk): ``` .textblock-container { width: 500px; height: 500px; border: 1px solid red; } div.textblock { width: 100px; height: 100px; line-height: 100px; border: 1px solid black; position: absolute; text-align: center; background: rgb(0, 150, 0); /* Fall-back for browsers that don't support rgba */ background: rgba(0, 150, 0, .5); } ``` and the relevant snippet of html: ```

foo (NW)

bar (NE)

baz (SW)

quux (SE)

``` The problem is that the foo/bar/baz/quux blocks are positioned relative to the browser window, not to their parent element. What am I doing wrong and how can I fix it?

Accepted Answer

Add `position: relative` to the parent `.textblock-container` div.

Absolutely positioned elements are positioned relative to their nearest positioned parent (e.g. the nearest parent element with a position of `absolute` or `relative`), so if they have no explicitly positioned parents (default position is `static`) they will be relative to the window.

how to position divs within another div

Solution

Problem