补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）

本篇文章主要谈谈自己对于Css定位的理解

本篇文章讲解绝对定位，为单独一篇详细讲解


文章目录

  • 往期
  • 主篇章
  • 无父元素的绝对定位
  • 父元素无定位的绝对定位
  • 父元素有定位的绝对定位
  • 父元素无定位、祖先元素有定位的绝对定位
  • 父元素、祖先元素均有定位的绝对定位（就近原则）
  • 验证绝对定位是脱离标准流的（脱标）


绝对定位position:absolute;是相对于存在定位属性的父元素进行偏移；

父元素无定位则顺推至祖先元素判断是否存在定位，若存在则相对于祖先元素进行偏移，若不存在则以此类推直至无祖先元素

若无父元素，则相对于浏览器进行偏移

若父元素、祖先元素均有定位，则子元素按照就近原则先选择最近的元素进行偏移

绝对定位是脱离标准流（脱标）的

下面代码实例的“有定位”均指除静态定位外的定位

无父元素的绝对定位

例子代码（无父元素的绝对定位）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: purple;
            /* 绝对定位 */
            position: absolute;
            /* 无父元素则相对于浏览器进行偏移 */
            left: 400px;
        }
    </style>
</head>

<body>
    <div>无父元素的绝对定位</div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_html

父元素无定位的绝对定位

例子代码（父元素无定位的绝对定位）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: blueviolet;

        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 绝对定位 */
            position: absolute;
            /* 父元素无定位的绝对定位相对于浏览器进行偏移 */
            left: 600px;
        }
    </style>
</head>

<body>
    <div class="father">
        父亲
        <div class="son">儿子</div>
    </div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_html_02

父元素有定位的绝对定位

例子代码（父元素有定位的绝对定位）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: brown;
            /* 父元素为相对定位 */
            position: relative;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 子元素为绝对定位 */
            position: absolute;
            /* 父元素有定位的绝对定位相对于父元素偏移 */
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="father">
        父亲
        <div class="son">儿子</div>
    </div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_绝对定位_03

父元素无定位、祖先元素有定位的绝对定位

例子代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandfather {
            width: 800px;
            height: 800px;
            background-color: powderblue;
            /* 祖父元素为相对定位 */
            position: relative;

        }

        .father {
            width: 400px;
            height: 400px;
            background-color: rebeccapurple;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* 子元素为绝对定位 */
            position: absolute;
            /* 距离祖父元素的底部为0px */
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="grandfather">
        爷爷
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_html5_04

父元素、祖先元素均有定位的绝对定位（就近原则）

例子代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandfather {
            width: 800px;
            height: 800px;
            background-color: powderblue;
            /* 祖父元素为相对定位 */
            position: relative;

        }

        .father {
            width: 400px;
            height: 400px;
            /* 父元素为相对定位 */
            position: relative;
            background-color: rebeccapurple;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* 子元素为绝对定位 */
            position: absolute;
            /* 距离父元素的底部为0px */
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="grandfather">
        爷爷
        <div class="father">
            爸爸
            <div class="son">儿子</div>
        </div>
    </div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_css3_05

验证绝对定位是脱离标准流的（脱标）

脱离标准流的意思可以在其他文章中进行查阅，这里不做过多解释

例子代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 400px;
            height: 400px;
            position: absolute;
            background-color: skyblue;
            left: 150px;
        }

        .b {
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

</html>

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：

动态view的绝对位置 android 动态绝对定位原理_绝对定位_06