您可以在下面的代码中看到,h1向下推动身体,绝对定位的块.absolute不会粘在顶部.但是你也可以看到同一个块粘在其父级的顶部.wrapper.为什么?
我不是在问这个伎俩; 我知道如何,例如填充而不是边缘到h1,或clearfix到父级等等.
我只对一件事情感兴趣:为什么h1保证金推低了body,但是没有推倒.wrapper?
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: silver;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: darkblue;
}
.wrapper {
position: relative;
overflow:hidden;
width: 50%;
height: 200px;
overflow: hidden;
background-color: yellow;
}
.wrapper > .absolute {
background-color: darkcyan;
}Run Code Online (Sandbox Code Playgroud)
<div class="absolute"></div>
<h1>Some title</h1>
<div class="wrapper">
<div class="absolute"></div>
<h1>Some title</h1>
</div>Run Code Online (Sandbox Code Playgroud)
好的,我会尽量更清楚.如果你点击下面的链接,你可以看到我的JSFiddle.有background-color: silver在 …