Question

考虑下面的网页。 <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>

absolutely relative to div absolutely relative to p

Answer 1

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

尝试使用背景颜色。您会看到div正在移动body几个像素的顶部。如果您删除p的保证金，一切都会没问题，或者将p设置为内嵌元素或将其浮动，甚至将溢出设置为auto，hidden或{ {1}}到父母。对抗折叠边距的另一种方法是为容器元素添加边框。所以你真的用这个边界来解决这个问题。

但是图像总是在它应该的位置。

Answer 2

确实很奇怪，但是让我试着解释一下这个元素实际上并不浮动，而你在p标签上使用了边距，当div有边框时它正在正常运行，当删除它时未能实现它如果添加浮动属性，则div也将获得其高度

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

一个CSS绝对定位之谜

2 个答案: