需要说明的是:W3Schools部分定义了CSS的"top"属性(而不是margin-或padding-top):
对于绝对定位的元素，top属性设置上边缘将一个元素转换为其所包含元素的上边缘以上/以下的单位
元素。
注意:这只适用于"position:absolute"。
我对"其包含元素的顶部边缘"部分感到困惑，因为如果我有以下结构(使用W3Schools提供的"top"属性上的示例进行编辑):
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:0px;
}
.main { padding: 5px; border: 1px solid #000; }
.col { position: absolute; overflow: hidden; top: 0px; }
.container { padding: 10px; border: 1px solid #000; }
.container2 { padding: 10px; border: 1px solid #000; }
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="test">
<p>Test</p>
</div>
</div>
<div class="container2">
<div class="col">
<img src="logocss.gif" width="95" height="84" />
<h1>This is a heading</h1>
</div>
</div>
</body>
</html>
如果是"包含元素的上边缘"，为什么图像在屏幕顶部覆盖"测试"文本?我特意在"main"下面嵌套了两个包含元素，我认为包含元素应该是"container2"。
如果我去掉"col"CSS，图像仍然在屏幕顶部，但文本不在。
困惑。:/
你需要给。container2一个位置，试试这个:
。Container2 {padding: 10px;边框:1px实线#000;位置:相对;}
我英语不好，所以如果我现在造成更多的混乱，请原谅我，但是position:absolute将定位元素绝对相对于下一个相对元素。在您的情况下，您没有任何具有position:relative属性的元素，因此它将相对于整个站点(html)绝对定位自己。
在您的情况下，您需要做的是给.container2一个position:relative。
必须正确设置父元素的position。
您在。container2div上缺少position: relative
这是一个工作的jsfield