我正面临一个非常简单的 margin-top 问题，它把我吓坏了。我简化了我的文档以使其可读。
这是我的html文档结构
<body>
<section>
</section>
<section>
<div></div>
</section>
</body>
这是我的 CSS
section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
background-color:green;
height:50px;
width:50px;
margin-top:0px;
}
当div的margin-top为0时，看起来像这样:
但是当我将它更改为 margin-top 到 10px 时，它看起来像这样:
我无法指出该空白是如何添加的。检查表明它是 body 的一部分。节实际上被推了下来。我期待那个小 div 相对于部分被推低。谁能解释这种奇怪的行为？
最佳答案
这里是 fiddle http://jsfiddle.net/suriyag/UhqX9/1/有满足您要求的解决方案
section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}
对你的代码做了一些小改动
关于html - margin-top css 属性的意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23165880/