浮動的div不在預期的位置時使用CSS左和頂定位使用絕對定位

我有一個浮動工具提示div（以編程方式附加到主體節點）應該出現在文檔[100，150]上，並且實現這一點我通過jQuery設置以下的CSS：浮動的div不在預期的位置時使用CSS左和頂定位使用絕對定位

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

這是除工具提示工作很好地被顯示比它低60-80像素：

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

的abolute位置從一個外部樣式表繼承應該。所以即使CSS在理論上將位置設置爲[100,150]，它實際上出現在[100，〜210]。

據我所見，我在CSS中指定了正確的座標，並且從我對絕對定位的理解中，座標是相對於文檔的，因此在顯示時沒有任何東西應該抵消工具提示。如果我的理解錯誤，請糾正我。

這種情況一致發生在I.E. 6，Windows 10上的Firefox 10和Chrome 14。

有沒有人遇到過（並解決過）類似的問題？這是一個真正的痛苦，並且因爲垂直偏移不太合適，所以修復位置不是一個可行的選擇。

非常感謝提前。

來源

2012-03-27 ert

你可以提供代碼演示，甚至只是代碼？和一個截圖以及？我們不能通過描述它來確定是什麼原因造成的。讓代碼爲自己說話 – Joseph 2012-03-27 02:04:14

是你的代碼中的錯字？你應該在頂部和左側使用px：100px;頂：150像素; – 2012-03-27 02:04:44

除了分號 – Jason 2012-03-27 02:05:25

如果您的位置：絕對元素位於其他靜態位置元素內，則他們將更改其基本偏移。

來源

2012-03-27 02:09:59 virmaior

謝謝你指出@virmaior，但是這個元素被插入到文檔的主體節點的結尾。我假設通過使用身體節點作爲父母，我可以避免從任何其他元素繼承偏移量。 – ert 2012-03-27 02:29:24

浮動的div不在預期的位置時使用CSS左和頂定位使用絕對定位

回答

相關問題