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

-1

我想要在我的页面顶部有一个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>

来源

2017-10-14 ScottF

当您将元素定位为“绝对”时，您将元素从正常文档流中取出，因此，位于绝对定位元素后面的任何元素都将占用其留下的空间。您需要以某种方式补偿此空间，通常通过添加空间缓冲区（例如使用边距），以便绝对元素不会位于仍在文档流中的任何其他元素的顶部。因此，在你的使用案例中，你可能会想要为你的'img'元素添加'margin-top：100px'。 – UncaughtTypeError

为什么你使用绝对？是因为*间距问题*你有或是因为你想将标题粘贴在窗口顶部并且只让内容滚动？ –

你不需要position: absolute对准东西顶部只是用margin: 0在body, h1像：

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>

希望这有助于！

来源

2017-10-14 18:38:02

当你给一个元素position: absolute，你的正常流动将其删除文件。这意味着它不再占用布局中的任何空间。因此，周围的元素不知道它存在并接管了以前使用的空间。

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

body, h1 { 
 
    margin: 0; 
 
} 
 

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

<body bgcolor="#000000"bgcolsor="#000000"> 
 

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

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

 
</body>

的更多信息：

Normal flow〜MDN
Absolute positioning〜MDN

来源

2017-10-14 18:35:14

为什么d oes以下兄弟姐妹的举动？

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

当你有应用到嵌套使用position: relative一些元素这个选项，你会发现孩子会听从父母的top，left，right和bottom。

另外，我怎么能有一个div配合针对顶级0的空间，而无需位置：绝对

这样：

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默认保证金的，因为当有在这样的情况下的余量，divbackground不会跟着整个div流。使用overflow: hidden我向你展示的方式是一种“清除”事物的技术，如clearfix等。你可以阅读更多关于他们here。

另外，Michael_B链接约normal flow和absolute positioning是非常相关的，必须阅读。

来源

2017-10-14 18:36:45 giovannipds

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

回答

相关问题