Я хочу поместить 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 расположены относительно окна браузера, а не их родительского элемента.
Что я делаю неправильно и как его исправить?