0

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            h2 { position:absolute;}
        </style>
    </head>
    <body>
        <h2>This is a heading with an absolute position</h2>
    </body>
</html>

问题：

如果我删除这一行：position:absolute;，文本<h2>...</h2>会向上移动，为什么？

4

5 回答 5

2

在默认视图中，没有 CSS...

当position: absolute;存在时，边距不会折叠。

在此处输入图像描述

当您删除 时position: absolute;，边距会塌陷，并与正文的边距混合在一起。

在此处输入图像描述

于 2013-08-24T07:07:32.183 回答
1

添加到 css ：

body {margin: 0; padding: 0;}
于 2013-08-24T07:06:46.773 回答
0

当您指定position:absolute,

该元素将从文档中删除并准确放置在您告诉它的位置。

这告诉浏览器将要定位的任何内容都应从文档的正常流程中删除，并将放置在页面上的确切位置。

它也脱离了文档的正常流程——它不会影响 HTML 中它之前或之后的元素在网页上的定位方式。

位置：绝对；

于 2013-08-24T07:07:23.637 回答
0

这是因为默认浏览器边距，如果您将边距设置为零，则可以删除绝对设置：

 h2
 {
 position:absolute;
 margin:0;
 }

http://jsfiddle.net/MGm36/

于 2013-08-24T07:13:02.043 回答
0

这是由于布局设置而发生的。

如果您使用position: absolute它，h2那么作为body标记的父元素将不会自动调整其高度。因此，主体的默认边距和填充属性将来自h2元素。并且当您从中删除position: absolute时h2，body将根据其子元素增加其高度。

这也发生在float财产上。

为了清楚地理解自己，为每个元素赋予不同的background-color/ bordercss 属性 ie body，html并h2使用您最喜欢的开发人员工具进行检查。

于 2013-08-24T07:22:59.180 回答