HTML body元素定位时的问题＆＃39; relative＆＃39;

Question

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

1. 为什么身体有CSS＆＃39;位置：亲属＆＃39;组？它是否打算修复一些错误？我听说有一些IE错误，我们无法设置元素的绝对定位。

2. 为什么＆＃39; margin-top＆＃39;只有＆＃39;体内的第一个元素会影响每个元素的位置吗？

3. Javascript function＆＃39; getBoundingClientRect（）＆＃39;为任何元素返回错误的值，因为它不考虑在最顶层元素上设置此margin-top值。

Answer 1

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。如果没有position:relative的主体，则该子项将相对于画布（浏览器内部窗口）定位，而不是相对于主体元素。有关完整故事，请参阅this tutorial（＆＃39;嵌套位置：绝对＆＃39;）。过去在这方面可能存在IE错误，但是从IE8开始，IE在这方面表现正常。

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

FC：那是设计上的。垂直边距会影响后续兄弟元素的位置，而position: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：那也是设计的，但我不确定你是否正确地解释了事情。你可以发布一些代码来演示它吗？我所知道的是你应该小心这种方法。有关完整故事，请参阅this Dottoro page，包括替代方案。