定位：样式和计算样式具有不同的值

Question

在这个平台上的第一篇文章:)

我目前遇到百分比定位问题。我的元素的 top 属性的样式和计算的样式显示了不同的值：

• 我在计算样式中看到的值是像素而不是样式表中定义的百分比
• 值不同：如果我用计算的样式替换样式，元素会向下移动大约 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 的顶部位置（以像素为单位）应该是 240 像素。 但计算样式给了我 280 像素。为什么？

这件事发生在我容器中的几乎所有孩子身上，这让我发疯了！

有人知道发生了什么吗？

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

---

编辑

既然你已经提供了代码，我就可以回答你的具体问题了。

在#container 和您的图像上设置display: block。

计算的值是相对于包含文档的，而不是相对于元素的直接父级的。如果您截取屏幕截图并测量从#container 顶部到#img2 顶部的距离，您应该会看到它是正确的 240 像素。但是，top 对 #img2 的计算值不一定是 240 像素。

Here's a demo。蓝色矩形绝对定位在top: 40%;，它在其 600px 容器中正确地向下渲染 240px，但是如果您查看top 的计算值，它会报告一个不同的值，因为它是相对于视口的顶部，即在正文上设置了边距。