Question

需要澄清：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，图像仍位于屏幕顶部，但文字不是。

混淆。：/

Answer 1

你需要给.container2一个位置，试试这个：

.container2 {padding：10px; border：1px solid＃000;位置：相对; }

Answer 2

我对英语不好，所以请原谅我，如果我现在造成更多的混淆，但是position:absolute会将元素置于与下一个相对元素相关的绝对位置。在您的情况下，您没有任何具有属性position:relative的元素，因此它将自己定位为与整个网站相关的绝对位置（html）。

在您的情况下，您需要做的是.container2 position:relative。

Answer 3

您必须正确position父元素。

你在.container2 div

上缺少position: relative

这是working jsfiddle

使用TOP属性和POSITION：ABSOLUTE

3 个答案: