When positioned static/relative how or why HTML and body tags are taking the width and height of viewport?

user_14453361 0
Viewed 243

When I set the border for HTML and body tags then observed that the border is for the entire viewport of the browser. The same is the case when it is positioned, relative.

But, when I make it positioned as absolute, then the border is applied only if I set height and width explicitly to HTML and body tags. Otherwise, it is displayed as a small dot as no dimensions are specified.

Not able to understand why this difference when we make it as absolute positioned.

Code:

* {margin:0; padding:0;}
html {border: 1px solid green;}
body {position: absolute; border: 1px solid yellow; width: 500px; height: 500px;}
<html>
    <head>
    </head>
    <body>
    </body>
</html>

css-position css html
2 Answers

This question is very similar to:
difference-between-style-positionabsolute-and-style-positionrelative

Refer to that question, and see if that doesn't answer yours.

Alternatively, you can visit:
W3SChool - CSS positioning and CSS-tricks - absolute-relative-fixed-positioining-how-do-they-differ/

Both links has great explanations for the difference between relative and absolute positioning.

In short:
Absolute
The position absolute sets and absolute position of an element using top, left right and bottom anchors. The anchors are relative to the next absolute positioned tag, if there is none it refers to the HTML tag.

Relative The element here is relative to it's own location, meaning if you give it a right of 50px it will move 50 px to the right of it's own static position.

user_30630550

Elements with static position will follow the regular flow of the document, so applying top-left-bottom-right to them will have no effect. If they are block elements *such as the html, body, and divs by defaults) they will have 100% width and as much height as they need for their content (zero if they have no content).

Elements with relative position are similar in every aspect, but top-left-bottom-right do apply to them, relative to their position in the document flow. Furthermore, relative positioned element will be the reference for elements within them.

With elements with absolute position, if you apply top-left-bottom-right they would adopt those coordinates not relative to themselves but their closest parent with relative or absolute position. It means if you tell a div within the body to be left: 50px; top: 50px; it will be exactly their, regardless of it's place in the html document (in the regular flow).

Absolute positioned elements, even if they are block elements, will have not only the height but also the width of their content by default, so an empty element width position absolute will always collapse, unless you specify width and height for it.

body{
  margin: 0;
}
div{
  padding: 1rem;
  margin: 1rem;
}
div:nth-child(1) {
  border: 1px solid red;
  left: 1rem;
}
div:nth-child(2) {
  border: 1px solid orange;
  left: 1rem;
  position: relative;
}
div:nth-child(3) {
  border: 1px solid blue;
  left: 1rem;
  position: absolute;
}
<div>static</div>
<div>relative</div>
<div>absolute</div>

user_27628000
Related