Question

我想在页面的左上角显示图像。顶部应该有10个像素的空间，左边应该有10个像素的空间。我在网上搜索了两个可能的答案。第一个使用margin属性，第二个top和left使用position: absolute;：

<body>
<img src="x.jpg" style="margin-top: 10px; margin-left: 10px;">
</body>

和

<body>
<img src="x.jpg" style="top: 10px; left: 10px; position: absolute;">
</body>

两者似乎都有效，但它们之间有什么区别吗？我应该使用哪一个？

Answer 1

这取决于具体情况。如果您使用保证金，则页面的其余部分将注意到图像存在，并移动（如果它们重叠）。如果您使用position: absolute;，那么页面的其余部分将不会注意到它存在，并且会忽略它，如果它与图像发生碰撞，那么它将会被删除。

使用绝对定位的示例：

.absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

<img src="http://www.jamfoo.com/chat/smiley.png" class="absolute">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet nisi nec est tristique efficitur. Fusce ut dapibus lorem. Mauris semper orci non magna malesuada tristique. In hac habitasse platea dictumst. In posuere arcu a turpis aliquam, vel ultrices ligula egestas. Quisque congue eu sem et porta. Pellentesque velit enim, tristique in felis nec, ornare pretium urna. Etiam ipsum turpis, commodo non augue ac, bibendum condimentum ipsum. Etiam tristique neque volutpat, luctus purus nec, tempus elit. Vestibulum rhoncus bibendum erat, sed malesuada quam convallis vel. Ut bibendum scelerisque ex, a fringilla magna euismod non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec euismod consequat turpis, eu tincidunt lacus fermentum eu. Nam egestas nibh quis sapien posuere egestas. </p>

使用保证金的示例：

.margin {
  margin-top: 10px;
  margin-left: 10px;
}

<img src="http://www.jamfoo.com/chat/smiley.png" class="margin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet nisi nec est tristique efficitur. Fusce ut dapibus lorem. Mauris semper orci non magna malesuada tristique. In hac habitasse platea dictumst. In posuere arcu a turpis aliquam, vel ultrices ligula egestas. Quisque congue eu sem et porta. Pellentesque velit enim, tristique in felis nec, ornare pretium urna. Etiam ipsum turpis, commodo non augue ac, bibendum condimentum ipsum. Etiam tristique neque volutpat, luctus purus nec, tempus elit. Vestibulum rhoncus bibendum erat, sed malesuada quam convallis vel. Ut bibendum scelerisque ex, a fringilla magna euismod non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec euismod consequat turpis, eu tincidunt lacus fermentum eu. Nam egestas nibh quis sapien posuere egestas. </p>

另请注意，如果您使用position: absolute;，则img将从页面的顶部/左侧向下10px向下并保持10px，但如果您使用保证金，那么它将是10px向下，10px从其父的顶部/左侧开始。例如;

.blue { background-color: blue; margin-top: 150px; } .margin { margin-top: 10px; margin-left: 10px; background-color: red; } .no-margin { background-color: red; } .absolute { background-color: red; position: absolute; top: 10px; left: 10px; } /* this style can be ignored */ span.absolute { left: 110px; }

<div class="blue"> <img src="http://www.jamfoo.com/chat/smiley.png" class="margin"> <span class="margin">This example uses margin</span> </div> <div class="blue"> <img src="http://www.jamfoo.com/chat/smiley.png" class="no-margin"> <span class="no-margin">This example uses no margin</span> </div> <div class="blue"> <img src="http://www.jamfoo.com/chat/smiley.png" class="absolute"> <span class="absolute">This example uses absolute positioning, and is at the top of the page, even though it is after the other two divs.</span> </div>

Answer 2

使用哪一个取决于您。不同之处在于绝对定位的图像将从文档流中移除图像，而其他元素将表现得像它不存在。

Answer 3

我会推荐第一个选项，因为你不必担心它在未来的绝对位置。举个例子，如果你选择第二个选项，其他元素会进入它，你必须给它们边距。我希望这能帮到你！

页面左上角的HTML显示图像

3 个答案: