关于绝对定位的详解（子篇章）

最新推荐文章于 2022-06-20 16:50:13 发布

陈适时

最新推荐文章于 2022-06-20 16:50:13 发布

阅读量1.5k

点赞数 3

分类专栏： css 前端文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_47966295/article/details/113758634

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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

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

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

往期

主篇章

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>

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

无父元素的绝对定位

父元素无定位的绝对定位

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

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

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

父元素无定位的绝对定位

父元素有定位的绝对定位

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

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

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

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

例子代码：

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

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

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

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

例子代码：

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

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

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

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

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

例子代码：

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

运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：
验证绝对定位是脱离标准流的（脱标）

结果显示，绝对定位类似于浮动的效果都是脱离了标准流，即不保留原来的位置

其他定位可在我的博客里再继续观看，本篇仅讲解绝对定位！

陈适时

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于绝对定位的详解（子篇章）

补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）本篇文章主要谈谈自己对于Css定位的理解本篇文章讲解绝对定位，为单独一篇详细讲解往期Vue简单入门Leangoo基本概念普及主篇章Css中的定位概念及各定位方法笔记分享文章目录往期主篇章无父元素的绝对定位父元素无定位的绝对定位父元素有定位的绝对定位父元素无定位、祖先元素有定位的绝对定位父元素、祖先元素均有定位的绝对定位（就近原则）验证绝对定位是脱离标准流的（脱标）绝对定位position:absolu.
复制链接

扫一扫