Question

我正在尝试在页面顶部放置一个div，顶部和侧面没有空间。

我所看到的关于如何做到这一点的所有例子都将div位置设置为绝对值。

但是当我这样做时，下面的img兄弟会移动到前一个div的页面顶部。

所以我有两个问题。为什么下面的兄弟会移动？另外，我怎样才能在顶部有一个0空格的div拟合，而没有位置：绝对

＆＃13;

div {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #888888;
  width: 100%;
  height: 100px;
}

＆＃13;

<body bgcolor="#000000">

  <div>
    <h1>HEADER</h1>
  </div>

  <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>

</html>

＆＃13;

Answer 1

您不需要position: absolute将事情调到最顶层，只需使用margin: 0上的body, h1赞：

body, h1 {
  margin: 0;
}

请看下面的代码段：

＆＃13;

body, h1 {
  margin: 0;
}

div {
  background: #888888;
  width: 100%;
  height: 100px;
}

＆＃13;

<!DOCTYPE html>
<html>
<body bgcolor="#000000">

<div>
    <h1>HEADER</h1>
</div>

<img src="http://placehold.it/304x228" alt="Mountain View" style="width:304px;height:228px;">

</body>

＆＃13;

希望这有帮助！

Answer 2

当您提供元素position: absolute时，将其从文档的正常流程中删除。这意味着它不再占用布局中的任何空间。因此，周围的元素不知道它存在并接管以前使用过的空间。

但在这种情况下，你不需要绝对定位。间隙的原因是浏览器设置的元素的默认边距。只需使用您自己的设置覆盖这些默认值。

＆＃13;

body, h1 {
  margin: 0;
}

div {
  height: 100px;
  background: #888888;
}

＆＃13;

<body  bgcolor="#000000"bgcolsor="#000000">

  <div>
    <h1>HEADER</h1>
  </div>

  <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>

＆＃13;

更多信息：

Normal flow ~MDN
Absolute positioning ~MDN

Answer 3

为什么下面的兄弟会搬家？

它移到顶部，因为第一个div是position: absolute，这是我们应用此属性/值时的预期值。此div对于父/正文和整个文档也是relative（因为在其他任何地方都没有指定position: relative）。当您应用position: absolute时，您将从正常文档流中删除该元素。它有点飞过文件。

如果您将此选项应用于使用position: relative嵌套到某个内容的元素，则您会看到该孩子将遵守父top，left ，right和bottom。

另外，我怎样才能在顶部有一个0空格的div，而没有位置：绝对

这样：

body {
  margin: 0;
}

使用：

h1 {
  margin-top: 0;
}

或者：

div {
  overflow: hidden;
}

position: absolute; top: 0px; left: 0px; width: 100%;上没有 div。 div的默认参数将接管所需的内容。

margin-top: 0或overflow: hidden必须在那里摆脱最高h1的默认保证金，因为在这样的情况下有一个保证金那，div background不会跟随整个div流程。使用overflow: hidden我向您展示的方式是＆＃34;清除＆＃34;事情，如clearfix和其他。您可以阅读有关他们的更多信息here。

此外，关于Michael_B和normal flow的absolute positioning个链接非常相关，必须阅读。

元素占据绝对位置的元素的空间

3 个答案: