当定位 static/relative 时，HTML 和 body 标签如何或为何占用视口的宽度和高度？

Question

当我为 HTML 和 body 标签设置边框时，观察到边框是针对浏览器的整个视口的。 positioned, relative.

时也是如此

但是，当我创建 positioned as absolute 时，只有当我将高度和宽度明确设置为 HTML 和 body 标签时才会应用边框。否则，它显示为一个小点，因为没有指定尺寸。

无法理解为什么当我们将其设为绝对定位时会出现这种差异。

代码:

* {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>

Answer 1

这个问题非常类似于：
difference-between-style-positionabsolute-and-style-positionrelative

参考那个问题，看看它是否能回答你的问题。

或者，您可以访问：
W3SChool - CSS positioning 和 CSS-tricks - absolute-relative-fixed-positioining-how-do-they-differ/

这两个链接都很好地解释了相对定位和绝对定位之间的区别。

简而言之：
绝对
使用顶部、左右和底部锚点的绝对位置设置和元素的绝对位置。锚点是相对于下一个绝对定位的标签，如果有 none 它指的是 HTML 标签。

亲戚这里的元素是相对于它自己的位置的，这意味着如果你给它一个 50px 的权利，它会向它自己的静态位置的右边移动 50px。

Answer 2

具有静态位置 的元素将遵循文档的常规流程，因此对它们应用top-left-bottom-right 将无效。如果它们是块元素*例如 html、body 和 divs 默认情况下）它们将具有 100% 的宽度和它们内容所需的高度（如果它们没有内容则为零).

具有 相对位置 的元素在各个方面都很相似，但 top-left-bottom-right 确实适用于它们，相对于它们在文档流中的位置。此外，相对定位的元素将成为其中元素的引用。

对于具有 绝对位置 的元素，如果您应用 top-left-bottom-right，它们将采用那些不相对于自身的坐标，而是采用具有相对或绝对位置的最接近父元素的坐标。这意味着如果你告诉正文中的 div 是 left: 50px; top: 50px; 它将完全是他们的，不管它在 html 文档中的位置（在常规流程中）。

绝对定位元素，即使它们是块元素，默认情况下不仅具有高度而且具有内容的宽度，因此空元素宽度位置绝对将总是折叠，除非你为它指定宽度和高度。

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>

当定位 static/relative 时，HTML 和 body 标签如何或为何占用视口的宽度和高度？

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

html

css

css-position