2

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

我目前遇到百分比定位问题。样式和计算样式为我的元素的 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得到它的高度。container600px 高也是如此。如果我计算一下，#img2 的顶部位置（以像素为单位）应该是 240 像素。但计算样式给了我 280 像素。为什么？

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

有人知道发生了什么吗？

4

1 回答 1

0

来自MDN：

getComputedStyle() 给出元素所有 CSS 属性的最终使用值。

计算的样式值将始终是绝对值，因为它们表示浏览器完成应用 CSS后给定元素的状态。

编辑

现在您已经提供了代码，我可以回答您的具体问题。

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

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

这是一个演示。蓝色矩形绝对定位在top: 40%;其 600px 容器中正确向下渲染 240px 的位置，但如果您查看它的计算值，top它将报告一个不同的值，因为它是相对于视口的顶部而言的，而视口的顶部设置在主体上.

于 2013-07-25T17:56:08.950 回答