CSS —— 定位

最新推荐文章于 2024-08-26 10:10:15 发布

逃逃日塔灰

最新推荐文章于 2024-08-26 10:10:15 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/sokoooo/article/details/113883850

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

CSS —— 定位

4. 脱标的盒子不会触发外边距塌陷（浮动元素、绝对定位、固定定位）

5. 绝对定位、固定定位会完全压住盒子

#END（部分截图源于b站pink老师）

一、定位的概述

1. 定位组成：

1.1 定位：将盒子定在某一个位置，按照定位的方式移动盒子；

1.2 组成：定位 = 定位模式 + 边偏移；

1.3 定位模式：指定一个元素在文档中的定位方式；

1.4 边偏移：决定该元素的最终位置；

2. 定位模式和边偏移

2.1 定位模式：通过 position 属性进行设置；

2.2 边偏移：

二、几种定位

1. 相对定位

1.1 相对定位：（relative）是元素相对于原来的位置进行位置移动；

1.2 语法格式：

选择器 { position : relative; }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: cadetblue;
        }



        div {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: cadetblue;
            left: 300px;
        }

1.3 特点：

① 移动位置的时候参照点是自己原来的位置；

② 不脱标，继续保留原来的位置；

        .one {
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }





        .one {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

2. 绝对定位

2.1 绝对定位：（absolute）移动位置时参照点为父级及其以上元素；

2.2 语法格式：

选择器 { position : absolute; }

        .one {
            width: 300px;
            height: 300px;
            background-color: cadetblue;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }





        .one {
            width: 300px;
            height: 300px;
            background-color: cadetblue;
        }
        .two {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

1.3 特点：

① 没有父级元素及其以上元素或祖先元素没有定位，则以浏览器为参照点；

② 以最近一级有定位的祖先元素为参照点移动位置；

③ 脱标，不再占有原先的位置；

        .one {
            width: 300px;
            height: 300px;
            background-color: cadetblue;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .three {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        .one {
            position: relative;
            top: 0px;
            width: 300px;
            height: 300px;
            background-color: cadetblue;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .three {
            position: absolute;
            bottom: 50px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

3. 固定定位

3.1 固定定位：（fixed）将元素固定于浏览器可视区的位置；

3.2 语法格式：

选择器 { position : fixed; }

3.3 特点：

① 以浏览器的可视窗口作为参照点移动元素；

（跟父元素无关且不随滚动条滚动）

② 脱标，不占有以前的位置；

3.4 固定定位小技巧：

4. 粘性定位

4.1 粘性定位：（sticky）可认为为相对定位与固定定位的混合；

4.2 语法格式：

选择器 { position : sticky; top : 10px; }

4.3 特点：

① 以浏览器的可视窗口为参照点；

② 不脱标，占有原来的位置；

③ 必须添加top、botton、right、left其中一个才有效；

5. 定位叠放次序

5.1 z-index：控制盒子的前后次序；

5.2 语法格式：

选择器 { z-index : 1; }

5.3 特点：

三、有关知识点

1. 子绝父相

子级是绝对定位，父级则用相对定位