CODEWITHSUNDEEP
htmlcss-positionmargindocument-bodygetboundingclientrect
Vaibhav Nigam
Vaibhav Nigam

Reputation: 1467

Issues when HTML body element is positioned 'relative'

On one of the websites, I found that body element is set position: relative and the content inside body seem to be shifted downwards by a scale of margin-top CSS value set on the topmost element in body.

  1. Why body has 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.

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

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

Upvotes: 3

Views: 1436

Answers (1)

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

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: That's not intended to fix a bug, but probably because one the (direct) children of the body element has position:absolute. Without the body having position:relative, that child would be positioned relative to the canvas (the browser inner window), rather than relative to the body element. See this tutorial ('Nested position:absolute') for the full story. There may have been IE bugs in that respect in the past, but as of IE8 IE behaves normally when it comes to this.

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

FC: That is by design. Vertical margins affect the position of the subsequent sibling elements, a position:relative; top:20px does not. Again, see the mentioned tutorial for the full story.

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

FC: That would also be by design, but I'm not sure whether you are interpreting matters correctly. Can you post some code to demonstrate it? What I do know is that you should be careful with that method. See this Dottoro page for the full story, including alternatives.

Upvotes: 3

Related Questions