DIV绝对定位 - 浏览器窗口调整大小后保持位置

Question

DIV绝对定位 - 浏览器窗口调整大小后保持位置

6

我正在使用绝对定位来显示div。

.my_label{
        list-style:none;
        list-style-type:none;

        position:absolute;
        top:2px;
        left:10px;
        width:20px;
        height:20px;

        background-color:#FF1021;
}

一旦我调整浏览器窗口大小，所有这些div元素都保持在同一位置。它们不再相对于父元素是绝对定位的。我希望它们与周围的对象保持关联。我应该使用"relative"定位还是有其他方法？（也可以使用jQuery）非常感谢。

- user448038

3个回答

3

你需要给父级div添加position:relative属性，同时给子级div添加position:absolute属性。

可以在http://jsfiddle.net/remYW/查看示例。

- Hussein

2

父元素必须具有position:relative;（或其他不同于static的定位方式），以便其子元素可以相对于它们进行绝对定位。

- Headshota

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shanethehat · Accepted Answer

为了使元素相对于其父元素进行绝对定位，必须将父元素设置为position:relative。

例如：

<div id="parent" style="margin:0 auto; width:500px; position:relative;">
    <div id="child" style="position:absolute; top:10px; left:10px;"></div>
</div>

这里的祖先元素不一定非得是直接父元素，当你设置绝对定位时，元素会从最近的一个带有定位属性的祖先元素开始定位。