Question

HTML code：

<!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>中的文字会向上移动，为什么？

Answer 1

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

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

enter image description here

当您移除position: absolute;时，边距会崩溃，并且会与身体的边距混合在一起。

enter image description here

Answer 2

添加到css：

body {margin: 0; padding: 0;}

Answer 3

指定position:absolute时，

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

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

它也取决于文档的正常流程 - 它不会影响HTML之前或之后的元素如何定位在网页上。

position:absolute;

Answer 4

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

 h2
 {
 position:absolute;
 margin:0;
 }

http://jsfiddle.net/MGm36/

Answer 5

由于布局设置，这种情况正在发生。

如果您使用position: absolute到h2，那么body标记的父元素将不会自动调整其高度。因此，正文的默认边距和填充属性将出现在h2元素中。当您从position: absolute中删除h2时，body会相应地增加其子元素的高度。

float属性也会发生这种情况。

为了清楚了解自己，请为每个元素background-color，border和body提供不同的html / h2 css属性，并使用您喜爱的开发者进行检查工具。

css：为什么文本会在删除位置后向上移动：绝对

5 个答案: