如何在另一个div中定位div

Question

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

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

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

- Jason S

Answer 1

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

绝对定位的元素定位相对于最近的已定位祖先元素（例如，最近具有absolute或relative定位的祖先元素），因此如果它们没有显式定位的祖先元素（默认定位为static），则相对于窗口定位。

- Ennui

---

添加了简短的解释 :) - Ennui

当涉及到偏移值（top，bottom，left，right属性）时，绝对定位元素将相对于其最近的定位父元素的左上角进行偏移，而相对定位元素则相对于其在页面流中的原始位置进行偏移（这样您就可以理解 position: relative 的目的，除了作为绝对定位后代的“锚点”位置之外）。@JasonS - Ennui

Answer 2

除非你在父级控制器中添加position: relative;，否则div将相对于窗口进行绝对定位。

- user2568107

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

实际上，您只需要为父div添加position: relative属性。

- Lucas Willems