如何在另一个div中定位div答案

【问题标题】：how to position divs within another div如何在另一个div中定位div
【发布时间】：2013-07-11 07:36:58
【问题描述】：

我想在另一个 div 中定位 div。

        .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的相关sn-p：

    <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 块是相对于浏览器窗口定位的，而不是相对于它们的父元素。

我做错了什么，我该如何解决？

【问题讨论】：

标签： html css positioning

【解决方案1】：

将position: relative 添加到父.textblock-container div。

绝对定位的元素是相对于它们最近的定位父元素定位的（例如，最近的父元素的位置为absolute 或relative），所以如果它们没有显式定位的父元素（默认位置是static），它们将相对于窗口。

【讨论】：

添加了简要说明:)
同样当涉及到偏移值（top、bottom、left、right 属性）时，绝对定位的元素将相对于其最近定位的左上角偏移父元素，而相对定位的元素相对于其在页面流中的原始位置偏移（只是为了让您了解position: relative 的目的，而不是作为绝对定位后代的“锚”位置）@JasonS

【解决方案2】：

试试这个：

.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 属性即可。

【讨论】：

【解决方案3】：

除非您将 position: relative; 添加到父控制器，否则 div 将定位在窗口的绝对位置

【讨论】：