14

我想在另一个 div 中定位 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 块是相对于浏览器窗口定位的，而不是相对于它们的父元素。

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

4

3 回答 3

34

添加position: relative到父.textblock-containerdiv。

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

于 2013-07-12T17:10:19.763 回答
8

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

于 2013-07-12T17:34:54.553 回答
5

尝试这个 ：

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

于 2013-07-12T17:11:29.620 回答