5

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

绝对相对于 div 绝对相对于 p

4

2 回答 2

2

您的图像始终位于右上角。它与折叠边距有关。

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

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

于 2013-07-21T09:32:14.097 回答
0

确实很奇怪，但让我尝试解释一下，实际上元素不是浮动的，并且您在p标签上使用边距，当 div 有边框时，它会正确使用，如果添加浮动属性而不是 div 将在删除时无法实现它也获得了它的高度

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

于 2013-07-21T02:44:10.720 回答