zoukankan      html  css  js  c++  java
  • 当父级是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{
            300px;
            height: 200px;
            margin: 10px auto;
            background-color: #ccc;
            border: 1px solid blue;
        }
        div{
             100px;
            height: 100px;
            background-color: #3ff;
            position: absolute;
        }
    </style>
    <body>
       body <div>div</div> </body> </html>

      

    此时的效果如下:

    body添加position:relative;
    div添加 bottom:0;
    效果如下:

    html添加position:relative;
    div添加 bottom:0;
    效果如下:

    body和html都不进行定位,div设置bottom:0;
    此时效果如下:

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

  • 相关阅读:
    软工总结博客
    第四次个人博客
    第三次博客作业
    结对项目作业
    第二次博客作业
    个人博客作业_week14
    个人博客作业_week7
    结对编程_附加题_博客2
    结对编程1_四则运算器_博客1
    个人博客作业_week3
  • 原文地址:https://www.cnblogs.com/Arlar/p/6254040.html
Copyright © 2011-2022 走看看