定位：風格和計算風格有不同的值

Question

在這個平臺上的第一篇文章:)

我目前有一個百分比定位的問題。風格和計算樣式被示出用於我的元件的頂屬性不同的值：

• 我在計算樣式看到的值以像素爲單位，而不是在％，如在樣式表中定義
• 值是不同的：如果我用計算樣式替換樣式，元素會向下移動約40個像素。

這裏是我的代碼：

<div id="container"> 
    <img id="img1" /> 
    <img id="img2" /> 
</div> 

#container { position:relative; display:inline-block;} 
#img1 { position:relative; } 
#img2 { position:absolute; top:40% } 

img1爲600像素高。由於它具有相對定位，所以container得到它的高度。所以container是600px高。如果我做數學，像素的＃img2的頂部位置應該是240px。 但計算風格給我280px。爲什麼？

這件事情發生在我的容器中幾乎所有的孩子，這是讓我瘋了！

有沒有人知道發生了什麼？

Answer 1

從MDN：

的getComputedStyle（）給出了一個元件的所有CSS屬性的最終使用的值。

計算樣式值永遠是絕對值，因爲它們代表瀏覽器已經完成應用CSS後，給定元素的狀態。

• https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
• https://developer.mozilla.org/en-US/docs/Web/CSS/used_value

---

編輯

現在你已經提供的代碼，我可以回答你的具體問題。

設置display: block在#container和您的圖片。

計算出的值是相對於包含文檔而不是元素的直接父項。如果你截圖並測量從#container的頂部到#img2的頂部的距離，你應該看到它正確的是240px。然而，對於#img2的計算值top不一定是240px。

Here's a demo。藍色矩形絕對位於top: 40%;，它在600像素容器中正確呈現240像素，但如果您查看top的計算值，則會報告不同的值，因爲它與視口的頂部相關，該視口的邊距設置爲身體。