一个CSS绝对定位之谜
Ste*_*veo 5 html css css-position
考虑下面的网页.它<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>
