时间戳

首页 > 解决方案 > 当定位为静态/相对时，HTML 和 body 标签如何或为什么占用视口的宽度和高度？

html - 当定位为静态/相对时，HTML 和 body 标签如何或为什么占用视口的宽度和高度？

问题描述

当我为HTML和body标签设置边框时，观察到边框是浏览器的整个视口。情况也是如此positioned, relative。

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

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

代码：

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

标签： htmlcsscss-position

解决方案

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

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

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

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

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

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

推荐阅读