Как позиционировать divs внутри другого div

Я хочу поместить divs в другой div.

Вот соответствующий фрагмент css (полный пример на 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);
        }

и соответствующий фрагмент html:

    <div id='blockdiv1' class='textblock-container'>
        <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div>
        <div id='blockdiv3' class='textblock'><span>bar (NE)</span></div>
        <div id='blockdiv4' class='textblock'><span>baz (SW)</span></div>
        <div id='blockdiv5' class='textblock'><span>quux (SE)</span></div>
    </div>

Проблема в том, что блоки foo/bar/baz/quux расположены относительно окна браузера, а не их родительского элемента.

Что я делаю неправильно и как его исправить?

Ответ 1

Добавьте position: relative в родительский .textblock-container div.

Абсолютно позиционированные элементы расположены относительно их ближайшего расположенного родителя (например, ближайшего родительского элемента с позицией absolute или relative), поэтому, если у них нет явно расположенных родителей (позиция по умолчанию static), они будет относиться к окну.

Ответ 2

Если вы не добавите position: relative; к родительскому контроллеру, div будет располагаться абсолютным в окне

Ответ 3

Попробуйте следующее:

.textblock-container {
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}

div.textblock {
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid black;
position: absolute;
text-align: center;             
background: rgb(0, 150, 0);
background: rgba(0, 150, 0, .5);
}

На самом деле вам просто нужно добавить свойство position: relative для родительского div.