<分区>
Possible Duplicate:
position: absolute without setting top/left/bottom/right?
看下面的代码,我有 div#box2,它有 position: absolute 设置。它位于两个设置了 position: static 的 div 之间。根据以下代码,我希望 div#box2 位于 body 元素的左上角。但是,当它被渲染时,它会收到一个 top 值,将它放在 box1 下方。为什么会这样?
我理解当我将div#box2 的top 值明确设置为0px 时,它出现在顶部。我只是不知道为什么浏览器一开始不将它计算为 0px。
下面是一些示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Position Test</title>
<style type="text/css">
body { background-color: #DEDEDE; }
#content { border: solid; }
#content div { height: 150px; opacity: .7;}
#box1 { background-color: red; }
#box2 { background-color: yellow; }
#box3 { background-color: lightblue; }
#content div { width: 150px; }
#box2 { position: absolute; text-align: right;}
</style>
</head>
<body>
<div id="content">
<div id="box1"><span>1</span></div>
<div id="box2"><span>2</span></div>
<div id="box3"><span>3</span></div>
</div>
</body>
</html>