欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

发布时间:2022/11/16 HTML 17 老码农
如意编程网 收集整理的这篇文章主要介绍了 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢? 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定位,而初始包含块并不是以<html>或<body>进行定位的。
w3c关于包含块及初始包含块的定义

我们可以做一下测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
</head>
<style type="text/css">
    html{
        border: 1px solid red;
        background-color: #ee8;
    }
    body{
        width:300px;
        height: 200px;
        margin: 10px auto;
        background-color: #ccc;
        border: 1px solid blue;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: #3ff;
        position: absolute;
    }
</style>
<body>
   body <div>div</div> </body> </html>

  

此时的效果如下:
当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

body添加position:relative;
div添加 bottom:0;
效果如下:
当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

html添加position:relative;
div添加 bottom:0;
效果如下:
当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

body和html都不进行定位,div设置bottom:0;
此时效果如下:
当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

所以,当绝对定位元素的祖先元素都没有进行relative/absolute/fixed定位时,是相对于初始包含块来定位的,而初始包含块并不是以<html>或<body>进行定位的。

总结

以上是如意编程网为你收集整理的当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。