Html 如何在另一个div中定位div

我想在另一个div中定位div

下面是css（）的相关片段：

以及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/qux块是相对于浏览器窗口而不是其父元素定位的

---

我做错了什么？如何修复它？

将

位置：相对
添加到父
.textblock container
div

绝对定位的元素相对于其最近定位的父元素（例如，位置为
绝对
或
相对
的最近父元素）进行定位，因此如果它们没有明确定位的父元素（默认位置为
静态
），它们将相对于窗口进行定位。
尝试以下操作：

.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);
}

事实上，您只需为父分区添加
位置：相对
属性。
除非您添加
位置：相对
对于父控制器，div将定位在窗口的绝对位置
添加了一个简要说明：）此外，当涉及偏移值（
顶部
，
底部
，
左侧
，
右侧
属性）时，绝对定位的元素将相对于其最近定位的父控制器的左上方偏移，当相对定位的元素相对于其在页面流中的原始位置偏移时（只是为了让您理解
position:relative
的目的，而不是绝对定位的子体的“锚定”位置）@JasonS
.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);
}