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

Scorb 发表于 Dev

斯科布

我试图在我的页面顶部有一个 div，它适合顶部和侧面没有空间。

我所看到的关于如何执行此操作的所有示例都将 div 位置设置为绝对位置。

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

所以我有两个问题。为什么下面的兄弟会移动？另外，如何在没有位置的情况下使 div 与顶部有 0 空间配合：绝对

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

<body bgcolor="#000000">

  <div>
    <h1>HEADER</h1>
  </div>

  <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>

</html>

索拉夫·拉斯托吉

您不需要position: absolute将东西对齐到顶部，只需margin: 0在body, h1Like上使用即可：

body, h1 {
  margin: 0;
}

看看下面的片段：

body, h1 {
  margin: 0;
}

div {
  background: #888888;
  width: 100%;
  height: 100px;
}

<!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>

希望这可以帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。