Html 默认情况下是相对于文档的绝对位置还是相对于…；？_Html_Css_Xhtml

Html 默认情况下是相对于文档的绝对位置还是相对于…；？

html css

Html 默认情况下是相对于文档的绝对位置还是相对于…；？,html,css,xhtml,Html,Css,Xhtml,据我所知，绝对定位是相对于提供定位上下文（默认情况下是文档）的包含块的。因此，默认情况下，绝对位置应该相对于html文档的边缘而不是视口（浏览器窗口）的边缘指定例如，假设html文档有一个宽度为2000px的元素E，则此文档的宽度约为2000px，因此如下代码： #abs { position: absolute; top: 128px; right: 0px; width: 100px; } 应在文档最右侧放置一个元素#abs（文档最右侧和最左侧之间的距离约为20

据我所知，绝对定位是相对于提供定位上下文（默认情况下是文档）的包含块的。因此，默认情况下，绝对位置应该相对于html文档的边缘而不是视口（浏览器窗口）的边缘指定

例如，假设html文档有一个宽度为2000px的元素E，则此文档的宽度约为2000px，因此如下代码：

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

应在文档最右侧放置一个元素#abs（文档最右侧和最左侧之间的距离约为2000px）。相反，将#abs放置在视口的右侧。我错过了什么

Thanx

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

<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>


#腹肌{
位置：绝对位置；
顶部：128px；
右：0px；
宽度：100px；
高度：100px；
背景色：#333；
}
测试
测试

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

<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>


#宽阔的{
宽度：2000px；
高度：1px；
}
#腹肌{
位置：绝对位置；
顶部：128px；
右：0px；
宽度：100px；
高度：100px；
背景色：#333；
}
测试
宽的
测试

所以我认为你的主要问题是你的假设是错误的。绝对位置是相对于视口的，而其他任何位置都没有相对或绝对位置包含它。

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

<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>


#腹肌{
位置：绝对位置；
顶部：128px；
右：0px；
宽度：100px；
高度：100px；
背景色：#333；
}
测试
测试

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

<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>


#宽阔的{
宽度：2000px；
高度：1px；
}
#腹肌{
位置：绝对位置；
顶部：128px；
右：0px；
宽度：100px；
高度：100px；
背景色：#333；
}
测试
宽的
测试

所以我认为你的主要问题是你的假设是错误的。绝对定位是相对于视口的，而其他任何元素都没有包含它的相对或绝对位置。

位置：绝对

元素的定位基于最近的父元素

位置：相对

。元素的默认位置为

静态

。（

-是一个元素，但可能是对该

静态

规则的接受。）

从上面我所看到的，您所描述的是

包含

#abc

，而不是视口（窗口等）。因此，水平滚动

位置：绝对

元素将其位置建立在距离

位置：相对

最近的父元素上。元素的默认位置为

静态

。（

-是一个元素，但可能是对该

静态

规则的接受。）

从上面我所看到的，您所描述的是

包含

#abc

，而不是视口（窗口等）。因此，水平滚动

默认情况下，绝对位置相对于文档的“初始包含块”。发件人：

定位框的包含块由最近的定位的祖先（如果不存在，则为，如我们的示例所示）

“初始包含块”是一个与视口大小相同的矩形，始终位于文档的开头（通常为左上角）。滚动时，它不会像视口那样在文档中移动

说明相对于初始包含块的绝对定位。默认情况下，绝对定位相对于文档的“初始包含块”。发件人：

定位框的包含块由最近的定位的祖先（如果不存在，则为，如我们的示例所示）

“初始包含块”是一个与视口大小相同的矩形，始终位于文档的开头（通常为左上角）。滚动时，它不会像视口那样在文档中移动

说明了相对于初始包含块的绝对位置。

Uh，这完全令人困惑-我假设“视口是最上面的元素”是指视口包含页面中的所有其他元素，包括元素#abs？但如果是这样的话，那么视口还包含#wide元素（宽度为2000px）。如果视口还包含#wide元素，那么视口的宽度至少为2000px，因此视口的最右侧应该距离最左侧2000px？！另外，您的意思是，当水平条滚动到文档最左侧时，viewport只是浏览器显示的窗口，而据我所知，viewport是当前浏览器显示的文档的任何部分，甚至当水平滚动条滚动到文档最右侧时浏览器显示的文档部分（假设文档非常宽）？！“视口”并不是您认为它的意思。视口是浏览器的可见部分。如果你拖你