前端开发基础之CSS选择器——定位

最新推荐文章于 2025-04-05 22:19:37 发布

jinling218

最新推荐文章于 2025-04-05 22:19:37 发布

阅读量415

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52626489/article/details/124615148

版权

本文介绍了前端开发中的CSS定位技术，包括静态定位、相对定位、绝对定位、固定定位以及子绝父相定位方式。详细阐述了各种定位的特点、用法和示例，同时讲解了元素的层级关系及其对布局的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位的基本使用

使用步骤：
1、确定使用的定位方式。设置定位的属性名是**position**。
定位的方式有以下几种：

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

2.设置偏移值，分为两个方向，分别是水平方向和垂直方向，在这两个方向中各选择一种（水平方向选一个垂直方向选一个）来设置即可。选取的原则一般是就近原则。
偏移值一般取值方式：

方向	属性名	属性值
水平	left	数字+px
水平	right	数字+px
垂直	top	数字+px
垂直	bottom	数字+px

几种定位的方式

实例的原效果如下图所示，：
在这里插入图片描述

静态定位

静态定位是默认值，就是之前认识的标准流。
代码;position: static;
注意：不能通过方位属性进行移动！！！

相对定位

相对于自己之前的位置进行移动
代码：position: relative;
特点：

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
        }
        .pink {
            background-color: pink;
        }
        .skyblue {
            position: relative;
            top: 50px;
            left: 50px;
            background-color: skyblue;
        }
        .green {
            background-color: green;
        }
    </style>

<body>
    <div class="pink"></div>
    <div class="skyblue"></div>
    <div class="green"></div>
</body>

结果：
在这里插入图片描述

绝对定位

相对于非静态定位的父元素进行定位移动
代码：position: absolute;
特点：

需要配合方位属性实现移动。
默认相对于浏览器可视区域进行移动。如果上一个元素上有定位则是相对于上一个元素来定位的。
在页面中不占位置 → 已经脱标。

代码示例（只写上修改部分，不修改部分同上。）：
针对特点1

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

针对特点2：

        .skyblue {
            position: absolute;
            background-color: skyblue;
        }

子绝父相（子元素绝对，父元素相对）

让子元素相对于父元素进行自由移动
子元素：绝对定位 absolute
父元素：相对定位 relative
优点：父元素是相对定位，则对网页布局影响最小。
代码示例：

    <style>
        .father {
            /* 设置相对定位 */
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .son {
            /* 设置绝对定位 */
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

效果如下：
在这里插入图片描述

注意：在实际网页开发布局中，在使用子绝父相的时候，父元素已经有绝对定位了，此时直接设置子绝即可！

子绝父相水平居中案例解决方法
1.先设置子绝父相。
2. 设置让子盒子往右移动父盒子的一半
left: 50%
3. 再让子盒子往左移动自己的一半。
做法代码：transform: translateX(-50%)。
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码。