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

最新推荐文章于 2023-05-26 23:12:28 发布

陈适时

最新推荐文章于 2023-05-26 23:12:28 发布

阅读量623

点赞数 1

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

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

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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

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

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

往期

主篇章

Css中的定位概念及各定位方法笔记分享

相对定位（relative）

相对定位是相对于自身位置（即原来标准流下位置）进行偏移

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

相对定位是相对于自身位置（即原来标准流下位置）进行偏移

例子代码：

<!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;
            background-color: skyblue;

        }

        .b {
            width: 200px;
            height: 200px;
            /* 相对定位 */
            position: relative;
            /* 相对于自身原来位置进行偏移 */
            left: 150px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="a"></div>
    <div class="b"></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: relative;
            /* 相对于自身原来位置进行偏移 */
            left: 200px;
            background-color: skyblue;

        }

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

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

</html>

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

陈适时

关注

1
点赞
踩
1

收藏

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

补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）本篇文章主要谈谈自己对于Css定位的理解本篇文章讲解相对定位，为单独一篇详细讲解往期Vue简单入门Leangoo基本概念普及关于绝对定位的详解（子篇章）主篇章Css中的定位概念及各定位方法笔记分享文章目录往期主篇章相对定位（relative）相对定位是相对于自身位置（即原来标准流下位置）进行偏移验证相对定位是不脱离标准流的（不脱标）相对定位（relative）相对定位是相对于自身位置（即原来标准流.
复制链接

扫一扫

专栏目录