CSS: 不同浏览器中的绝对定位

Question

为什么在不同的浏览器上位置不同？

{
    position: absolute;
    left:332px;
    top: 210px;
    width: 293px;
    height: 215px;
    border: 1px solid #000000;
    background-color: #143f72;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
}

在IE中，相对于Firefox，它向左移动100px，在Chrome中，相对于FF，它向右移动100px...为什么？

编辑：HTML只是<div id="container"><div id="the_css_above_div"></div></div>

#container具有以下CSS：

#container{
    float:left;
    width: 632px;
}

谢谢！

- luqita

---

需要HTML代码才能找到问题的根源。 - netbrain

刚在IE8、FF和Chrome上检查了一下，它们之间似乎没有任何不同。请访问http://jsfiddle.net/EQn2E进行检查。需要查看其他代码以确定是否存在问题。 - anothershrubery

HTML代码只是<div id="that_css_id"></div>。 - luqita

请注意，position: absolute 是相对于第一个具有非默认 position 属性的父元素而言的。也许某些浏览器认为 float 与默认值不同，而其他浏览器则不然？ - Bazzz

如果你真的想深入了解这个问题，可以使用jsFiddle或JS Bin创建一个完整的测试用例。或者，提供你页面的实时链接。 - thirtydot

将 position: relative 添加到容器中可能会解决您遇到的问题，但这只是一个猜测。建议像 @thirtydot 和 @anothershrubery 建议的那样提供一个测试页面的链接。 :) - limitlessloop

Answer 1

已解决……父级div需要在CSS声明中设置position:relative。如果有人遇到这个问题，请检查您的父级div :)

- luqita

---

提供更多信息以帮助那些试图提供帮助的人？ - anothershrubery

我相信这不仅适用于IE...块的定位是绝对的，与具有相对或绝对定位属性的父元素相关，或者与窗口相关，如果没有定义父元素的位置... - Michael D

我正要发布关于这个问题的内容，但是一看到你的“解决了”，我就想，我知道这个！！！哈哈......谢谢。+1 - somdow

谢谢，luqita。如果没有你的帖子，我永远不会想到这个。+1 - sehummel

Answer 2

你的父级 div 必须有 position:relative;。否则，你的 position:absolute; 将会从整个页面定位。如果父级 div 有相对定位，绝对定位的 div 将根据其父级进行定位。

- Extelliqent