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

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高600像素。如果我做数学计算，＃img2的顶部位置应为240像素。 但计算机风格给我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。但是，top #img2的计算值必须为240px。

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