当使用CSS定位时浮动div不在预期位置左和顶部有绝对定位

Question

我有一个浮动的工具提示div（以编程方式附加到主体节点）应该出现在文档上的[100,150]，为实现这一点，我通过jQuery设置以下css：

var tooltip = //my tooltip element wrapped in jQuery object
var targetLeft = 100; //Calculated
var targetTop = 150; //Calculated

tooltip.css({left: targetLeft, top: targetTop, display: '', opacity: 1.0});

绝对位置继承自外部样式表：

.tooltip {
    border-color: none;
    width: 310px;
    margin: 4em;
    font-size: 1em;
    padding: 0.5em;
    z-index:9999;
    position:absolute;
}

这很好用，除了工具提示出现比它应该低60-80像素。因此，即使CSS理论上将位置设置为[100,150]，它实际上也出现在[100，~210]。

据我所知，我在CSS中分配了正确的坐标，根据我对绝对定位的理解，坐标是相对于文档的，因此在显示时不应该偏移工具提示。如果我的理解是错误的，请纠正我。

这一直发生在I.E. 6，Windows 10上的Firefox 10和Chrome 14.

有没有人遇到过（并解决过）类似的问题？这是一个真正的痛苦，因为垂直偏移并不是一个固定位置的“神奇数字”不是一个可行的选择。

非常感谢提前。

Answer 1

如果你的位置：绝对元素在其他静态定位元素内，那么它们将改变其基本偏移。