gpt4 book ai didi

html - 对于本身不设置属性的绝对元素,css 属性 top 是如何计算的?

转载 作者:搜寻专家 更新时间:2023-10-31 23:09:31 24 4
gpt4 key购买 nike

<分区>

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>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com