Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解前言持续学习总结输

前言

持续学习总结输出中，今天分享的是Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解

1、定位的基本介绍

我们的网页常见布局方式有：标准流、浮动、定位

标准流 块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局

浮动可以让原本垂直布局的 块级元素变成水平布局

定位

可以让元素自由的摆放在网页的任意位置
一般用于 **盒子之间的层叠情况 ** 定位之后的元素层级最高，可以层叠在其他盒子上面

2、定位的基本使用

定位属性名：position

常见属性值

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可选取的原则一般是就近原则 (离哪边近用哪个)

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

小结

使用定位的步骤是什么?

设置定位的方式:position

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

设置偏移值:水平+垂直就近各取一个

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

3、静态定位

静态定位：position: static;

静态定位是默认值，就是之前认识的标准流。

注意点:

静态定位就是之前标准流，不能通过方位属性进行移动

之后说的定位不包括静态定位，一般特指后几种:相对、绝对、固定

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            /* 静态定位, 默认值, 标准流 */
            position: static;
            left: 100px;
            top: 200px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

运行结果：请添加图片描述

小结：

静态定位能通过方位属性进行移动吗? • 不能，静态定位的元素就是默认标准流的情况

4、相对定位

相对定位：position: relative;

自恋型定位，相对于自己之前的位置进行移动

特点:

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 → 没有脱标

应用场景:

配合绝对定位组CP(子绝父相)
用于小范围的移动

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         /* 
                1. 占有原来的位置
                2. 仍然具体标签原有的显示模式特点
                3. 改变位置参照自己原来的位置
            */
        .box {
            position: relative;
            right: 200px;
            bottom: 400px;
            left: 100px;
            top: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

运行结果：请添加图片描述

小结：

相对定位position的属性值是什么? • relative

相对定位是否需要配合方位属性实现移动? • 需要配合方位属性实现移动

相对定位的元素相对于谁进行移动? • 相对于自己原来位置进行移动

相对定位的元素在网页中是否占位置? • 在页面中占位置 → 没有脱标

5、绝对定位

绝对定位：position: absolute;

拼爹型定位，相对于非静态定位的父元素进行定位移动

特点:

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标

应用场景:

配合绝对定位组CP(子绝父相)

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        1. 脱标, 不占位
        2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
        */

        /* 绝对定位: 
            先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
            有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
        */

        .box {
            
            position: absolute;
            /* left: 50px; */
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

运行结果：请添加图片描述

绝对定位相对于谁移动?

祖先元素中没有定位 → 默认相对于浏览器进行移动
祖先元素中有定位 → 相对于最近的有定位的祖先元素进行移动

小结：

绝对定位position的属性值是什么? • absolute

绝对定位是否需要配合方位属性实现移动? • 需要配合方位属性实现移动

绝对定位的元素相对于谁进行移动?

祖先元素中没有定位 → 默认相对于浏览器进行移动
祖先元素中有定位 → 相对于最近的有定位的祖先元素进行移动

绝对定位的元素在网页中是否占位置? • 在页面中不占位置 → 已经脱标

6、子绝父相

让子元素相对于父元素进行自由移动

子元素:绝对定位父元素:相对定位

子绝父相好处: • 父元素是相对定位，则对网页布局影响最小

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .father {
            position: relative;

            width: 400px;
            height: 400px;
            background-color: pink;
        }
        /*  相对, 绝对 */
        /* 父级相对定位; 子级绝对定位 -- 子绝父相 */
        /* position: relative; */
        /* position: absolute; */
        /* right: 100px; */  
        .son {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .sun {
            position: absolute;
            /* left: 20px;
            top: 30px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }

        /* 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>
</html>

运行结果：请添加图片描述 小结：

子绝父相的含义是什么? • 子元素:绝对定位 • 父元素:相对定位

子绝父相的应用场景是什么? • 让子元素相对于父元素进行自由移动

子绝父相的好处是什么? • 父元素是相对定位，则对网页布局影响最小

(拓展) 子绝父绝特殊场景 场景:在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可!

原因: • 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

7、固定定位

固定定位：position: fixed;

死心眼型定位，相对于浏览器进行定位移动

特点:

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标

应用场景:

让盒子固定在屏幕中的某个位置

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>     
        /* 
            1. 脱标-不占位置
            2. 改变位置参考浏览器窗口
            3. 具备行内块特点
        */

        .box {
            position: fixed;
            left: 0;
            top: 0;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

运行结果：请添加图片描述 小结：

固定定位position的属性值是什么? • fixed

固定定位是否需要配合方位属性实现移动? • 需要配合方位属性实现移动

固定定位的元素相对于谁进行移动? • 相对于浏览器可视区域进行移动

固定定位的元素在网页中是否占位置? • 在页面中不占位置 → 已经脱标

8、元素的层级关系

不同布局方式元素的层级关系: • 标准流 < 浮动 < 定位

不同定位之间的层级关系: • 相对、绝对、固定默认层级相同 • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

场景:改变定位元素的层级 属性名:z-index

属性值:数字 • 数字越大，层级越高

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            
            width: 200px;
            height: 200px;
        }

        .one {
            position: absolute;
            left: 20px;
            top: 50px;

            z-index: 1;

            background-color: pink;
        }

        .two {
            position: absolute;
            left: 50px;
            top: 100px;
            
            background-color: skyblue;
        }

        /* 
            默认情况下, 定位的盒子  后来者居上 ,
            z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
            注意: z-index必须配合定位才生效
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

运行结果：请添加图片描述 小结：

标准流、浮动、定位元素之间的层级关系是什么样? • 标准流 < 浮动 < 定位

不同定位元素之间的层级关系是什么样? • 相对、绝对、固定默认层级相同 • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

通过什么属性可以修改定位元素的层级? • z-index:数字;

总结

在这里插入图片描述

最后分享一句话：

闻道有先后，术业有专攻。 《师说》 ——韩愈

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！！