Проблемы, когда элемент тела HTML расположен «относительно»

На одном из веб-сайтов я обнаружил, что элемент body имеет значение position: relative, а содержимое внутри тела, кажется, смещено вниз по шкале margin-top значения CSS, установленного для самого верхнего элемента в теле.

  1. Почему тело имеет CSS «позиция: относительная»? Это предназначено для исправления какой-то ошибки? Я слышал, что была какая-то ошибка IE, из-за которой мы не могли установить абсолютное позиционирование элементов.

  2. Почему «margin-top» «только» первого элемента внутри тела влияет на положение каждого элемента?

  3. Функция Javascript 'getBoundingClientRect()' возвращает неправильное значение для любого элемента, поскольку она не учитывает это значение верхней границы поля, установленное для самого верхнего элемента.


html css-position margin document-body getboundingclientrect
person lazyvab    schedule 26.06.2014    source источник
comment
Не могли бы вы создать демонстрацию jsbin.com, чтобы мы могли понять, что вы имеете в виду? Также не забудьте добавить соответствующий код, чтобы воспроизвести проблему прямо в ваш вопрос.   -  person Roko C. Buljan    schedule 26.06.2014

Ответы (1)


arrow_upward
3
arrow_downward

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, этот дочерний элемент будет расположен относительно холста (внутреннего окна браузера), а не относительно элемента тела. См. это руководство ('Вложенное положение:абсолютное ') для полной истории. В прошлом, возможно, были ошибки IE в этом отношении, но с IE8 IE ведет себя нормально, когда дело доходит до этого.

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

Ф.К.: Это по замыслу. Вертикальные поля влияют на положение последующих одноуровневых элементов, а 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.

ФК: Это тоже было бы задумано, но я не уверен, правильно ли вы интерпретируете ситуацию. Можете ли вы опубликовать код, чтобы продемонстрировать это? Что я знаю, так это то, что вы должны быть осторожны с этим методом. См. эту страницу Dottoro для получения полной информации, включая альтернативы.

person Frank Conijn    schedule 26.06.2014