gpt4 book ai didi

html - 默认情况下绝对定位是相对于文档还是相对于……?

转载 作者:太空宇宙 更新时间:2023-11-03 21:01:15 27 4
gpt4 key购买 nike


据我所知,绝对定位是相对于提供定位上下文的包含 block 而言的,默认情况下,它是文档。因此,默认情况下,应该相对于 html 文档的边缘指定绝对定位,而不是相对于视口(viewport)(浏览器窗口)的边缘?!

例如,假设html文档有一个元素E,宽度为2000px,那么这个文档的宽度就在2000px左右,因此代码如下:

#abs
{
position: absolute;
top: 128px;
right: 0px;
width: 100px;
}


应将元素 #abs 放置在文档的最右侧(文档最右侧和最左侧之间的距离约为 2000px)。相反,#abs 被放置在视口(viewport)的右侧。我错过了什么?


谢谢

最佳答案

我认为您缺少的是视口(viewport)算作最上面的元素。

<html>
<head>
<style type="text/css">
#abs{
position: absolute;
top: 128px;
right: 0px;
width: 100px;
height: 100px;
background-color: #333;
}
</style>
<title>test</title>
</head>
<body>
<div id="abs">
test
</div>
</body>
</html>

这模仿了您所说的您所看到的行为。如果更改视口(viewport)大小,#abs div 将跟随右边缘。添加 2000 像素宽的元素不会改变这一点。

<html>
<head>
<style type="text/css">
#wide{
width: 2000px;
height: 1px;
}
#abs{
position: absolute;
top: 128px;
right: 0px;
width: 100px;
height: 100px;
background-color: #333;
}
</style>
<title>test</title>
</head>
<body>
<div id="wide">
wide
</div>
<div id="abs">
test
</div>
</body>
</html>

所以我认为你的主要问题是你的假设是错误的。当没有其他东西具有包含它的相对或绝对位置时,绝对定位是相对于视口(viewport)的。

关于html - 默认情况下绝对定位是相对于文档还是相对于……?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1948349/

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