3

在其中一个网站上，我发现body元素已设置position: relative，并且正文中的内容似乎向下移动了margin-top在正文中最顶部元素上设置的 CSS 值的比例。

  1. 为什么body有CSS'position：relative'设置？它是为了修复一些错误吗？我听说有一些 IE 错误，我们无法设置元素的绝对定位。

  2. 为什么“仅”主体内的第一个元素的“margin-top”会影响每个元素的位置？

  3. Javascript 函数 'getBoundingClientRect()' 为任何元素返回错误值，因为它不考虑在最顶部元素上设置的这个 margin-top 值。

4

1 回答 1

3

1. Why does the body have CSS 'position:relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.

FC：这不是为了修复错误，但可能是因为 body 元素的（直接）子元素之一具有position:absolute. 如果没有 body position:relative，该子元素将相对于画布（浏览器内部窗口）定位，而不是相对于 body 元素。有关完整故事，请参阅本教程（“嵌套位置：绝对”）。过去在这方面可能存在 IE 错误，但从 IE8 开始，IE 在这方面表现正常。

.
2. Why does 'margin-top' of 'only' the first element inside the body affect the position of every element?

FC：这是设计使然。垂直边距会影响后续兄弟元素的位置，aposition:relative; top:20px不会。再次，请参阅提到的教程以获取完整的故事。

.
3. Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.

FC：这也是设计使然，但我不确定你是否正确解释了问题。您可以发布一些代码来演示它吗？我所知道的是你应该小心使用这种方法。请参阅此 Dottoro 页面以获取完整故事，包括替代方案。

于 2014-06-26T07:43:30.450 回答