一个 CSS 绝对定位之谜答案

【问题标题】：A CSS absolute positioning mystery一个 CSS 绝对定位之谜
【发布时间】：2013-07-21 17:32:14
【问题描述】：

考虑下面的网页。 <img> 相对于其父级绝对定位，当我在 Safari 或 Firefox 上加载此页面时，<img> 出现在右上角，正如预期的那样（见第一张图片）。但是，当从<div> 中删除边框时，例如，通过设置border-width: 0，<img> 的位置绝对相对于<p> 标记，它的兄弟！参见图片#2。为什么是这样？边框应该有什么区别？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
body {
    margin: 0;
}
div {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid red;
}
img {
    position: absolute;
    right: 0;
    top: 0;
}
p {
    margin: 20px;
}
</style>

</head>
<body>
    <div>
        <img src="content/en/flag.png" />
        <p>This is a test</p>
    </div>
</body>
</html>

【问题讨论】：

尝试使用 css-reset 然后检查页面。 meyerweb.com/eric/tools/css/reset

标签： css html css-position

【解决方案1】：

您的图片始终位于右上角。它与collapsing margins有关。

尝试使用背景颜色。您将看到您的div 正在远离body 的顶部几个像素。如果您删除p 的边距，一切都会好起来的，或者将p 设置为内联元素或浮动它，甚至将溢出设置为auto、hidden 或scroll 给父级。另一种对抗折叠边距的方法是为容器元素添加边框。所以你真的是用那个边界来解决这个问题。

但图像总是在它应该在的地方。

【讨论】：

也可以将padding-top: 1px;设置为父级：stackoverflow.com/questions/1762539/…
谢谢，我不知道折叠边距。

【解决方案2】：

这确实很奇怪，但让我试着解释一下，实际上元素不是浮动的，你在p标签上使用了margin float 属性比 div 也将获得它的高度

将overflow:auto; 添加到 div 将解决问题

【讨论】：