定位流之相对定位

最新推荐文章于 2022-08-11 19:06:55 发布

407指导员

最新推荐文章于 2022-08-11 19:06:55 发布

阅读量588

点赞数

分类专栏： CSS3 文章标签： css 定位

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109712985

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

定位流

定位流分类

1.相对定位

2.绝对定位

3.固定定位

4.静态定位

什么是相对定位

相对定位就是相对于自己以前在标准流中的位置来移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            background-color: green;
            position: relative;
            top: 20px;
            left: 20px;
        }

        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

在这里插入图片描述

注意点

1.相对定位不会脱离标准流，会继续在标准流中占用一份空间

2.在相对定位中同一个方向上只能有一个定位属性。上下和左右如果同时存在，以上和左生效。

3.相对定位不脱离标准流，所以相对定位中区分块级元素/行内元素/行内块级元素。

4由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以给相对定位设置margin /padding等属性会影响标准流的布局。（本质上就是这些属性是修改未定位之前的标准流位置）

.box2 {
 background-color: green;
position: relative;
 top: 20px;
left: 20px;
 margin-bottom: 20px;

}

在这里插入图片描述

.box2 {
    background-color: green;
    position: relative;
    top: 20px;
    left: 20px;
  margin-top: 20px;
}

在这里插入图片描述

相对定位应用场景

1.用于对元素进行微调。比如之前做的输入框和验证码不在同一行，可以采用浮可以使他们水平对齐，也可以设置验证码相对定位，调节top值。

2.配合后边的绝对定位使用。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位流之相对定位

定位流定位流分类1.相对定位2.绝对定位3.固定定位4.静态定位什么是相对定位相对定位就是相对于自己以前在标准流中的位置来移动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位流</title> <style> * { margin: 0;
复制链接

扫一扫