当前位置： 首页 > news >正文

【前端】深入理解CSS定位

news 2025/9/15 22:24:09

目录

  • 一、前言
  • 二、定位组成
    • 1、定位模式
      • 1.1、静态定位static
        • ①、语法定义
        • ②、特点
      • 1.2、相对定位relative
        • ①、语法定义
        • ②、特点
        • ③、代码示例
      • 1.3、绝对定位absolute
        • ①、语法定义
        • ②、特点
        • ③、代码示例
          • 1）、没有祖先元素或者祖先元素没有定位
          • 2）、祖先元素有定位
      • 1.4、固定定位fixed
        • ①、语法定义
        • ②、特点
        • ③、代码示例
        • ④、固定定位算法
      • 1.5、粘性定位sticky
        • ①、语法定义
        • ②、特点
        • ③、代码示例
      • 1.6、定位叠放次序 z-index
        • ①、语法定义
        • ②、特点
  • 三、定位总结
    • 1、绝对定位的盒子居中
    • 2、定位特殊特性
    • 3、脱标的盒子不会触发外边距塌陷
    • 4、绝对定位（固定定位）会完全压住盒子
  • 四、边偏移
  • 五、元素的显示与隐藏
    • 1、display显示隐藏
    • 2、visibility显示隐藏
    • 3、overflow溢出显示隐藏
    • 4、三者差异
  • 六、子绝父相的由来

一、前言

CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制：普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。

  • 普通流：元素默认从上至下或者从左至右的排序顺序
  • 浮动流：添加了浮动的元素
  • 定位流：添加了定位的元素，包括相对定位、绝对定位、固定定位

接下来，博主会从CSS定位、CSS边偏移、元素的显示与隐藏，这三部分进行讲解

二、定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

1、定位模式

定位模式决定元素的定位方式，是通过CSS的position属性来设置的

在这里插入图片描述

1.1、静态定位static

①、语法定义

静态定位是元素的默认定位方式，无定位的意思

#静态定位语法
position: static

②、特点

  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

1.2、相对定位relative

①、语法定义

相对定位是元素在移动位置时，是相对于它原来的位置来说的

#相对定位语法
position: 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>.box1 {//设置盒子相对定位position: relative;left: 130px;top: 140px;width: 200px;height: 200px;background-color: pink;}.box2 {width: 200px;height: 200px;background-color: palegreen;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

在这里插入图片描述

1.3、绝对定位absolute

①、语法定义

绝对定位是元素在移动位置时，是相对于它的祖先元素来说的

#绝对定位
position: absolute

②、特点

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  • 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素未参考点移动元素
  • 绝对定位不再占有原先的位置（脱标）

③、代码示例

1）、没有祖先元素或者祖先元素没有定位
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {position: absolute;left: 300px;bottom: 390px;width: 200px;height: 200px;background-color: pink;}.big {width: 500px;height: 500px;background-color: palegreen;}</style>
</head><body><div class="big"><div class="box1"></div></div>
</body></html>

在这里插入图片描述

2）、祖先元素有定位
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {position: absolute;left: 30px;bottom: 10px;width: 200px;height: 200px;background-color: pink;}.big {width: 500px;height: 500px;background-color: palegreen;}.bbig{position: relative;width: 700px;height: 700px;padding: 20px;background-color: blueviolet;}</style>
</head><body><div class="bbig"><div class="big"><div class="box1"></div></div></div></body>

在这里插入图片描述

1.4、固定定位fixed

①、语法定义

  • 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
#固定定位fixed
position: fixed

②、特点

  1. 以浏览器的可视窗口为参照点移动元素
    a. 跟父元素没有任何关系
    b. 不随滚动条滚动
  2. 固定定位不再占有原先的位置

③、代码示例

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big {position: fixed;top: 100px;right: 40px;}</style>
</head><body><div class="big"><img src="../02/images/user.png" alt=""></div><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p><p>好好学习</p>
</body>

在这里插入图片描述

④、固定定位算法

假如让盒子固定在版心右侧位置

  1. 让固定定位的盒子left: 50%，走到浏览去可视区（版心）的一半位置
  2. 让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

1.5、粘性定位sticky

①、语法定义

  • 粘性定位可以被认为是相对定位和固定定位的混合
#粘性定位sticky
position: sticky

②、特点

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  2. 粘性点位占有原先的位置（相对定位特点）
  3. 必须添加top、left、right、bottom其中一个才有效

③、代码示例

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 3000px;}.fixed{width: 800px;height: 50px;background-color: pink;margin: 100px auto;position: sticky;top: 0;}</style>
</head><body><div class="fixed">导航栏</div>
</body>

在这里插入图片描述

1.6、定位叠放次序 z-index

①、语法定义

在使用定位布局时，可能会出现盒子重叠的情况。这时可以使用z-index来控制盒子的前后次序

#定位叠放次序
z-index: 数值

②、特点

  1. 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  2. 如果属性值相同，则按照书写顺序，后来居上
  3. 数字后面不能加单位
  4. 只有定位的盒子才有z-index属性

三、定位总结

在这里插入图片描述

1、绝对定位的盒子居中

加了绝对定位absolute的盒子不能通过margin: auto来实现水平居中，但是可以通过以下计算方法实现水平和垂直居中

  • letf：50%，让盒子的左侧移动到父级元素的水平中心位置
  • margin-left：-100px，让盒子向做移动自身宽度的一半

2、定位特殊特性

绝对定位position: absolute和固定定位position: fixed也和浮动float类似

  1. 行内元素添加绝对absolute或者固定fixed定位，可以直接设置高度和宽度
  2. 块级元素添加绝对absolute或者固定fixed定位，如果不给宽度和高度，默认大小是内容的大小

3、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

4、绝对定位（固定定位）会完全压住盒子

  1. 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字/图片
  2. 绝对定位（固定定位）会压住下面标准流所有的内容

四、边偏移

边偏移就是定位的盒子移动到最终位置

在这里插入图片描述

五、元素的显示与隐藏

1、display显示隐藏

  1. display：none
    a. 隐藏对象
  2. display：block
    a. 除了转换为块级元素之外，同时还有显示元素的意思
  3. display隐藏元素后，不再占有原来的位置

2、visibility显示隐藏

  1. visibility：visible
    a. 元素可视
  2. visibility：hidden
    a. 元素隐藏
  3. visibility隐藏元素后，继续占有原来的位置

3、overflow溢出显示隐藏

  1. overflow：visible
    a. 不剪切内容也不添加滚动条
  2. overflow：hidden
    a. 不显示超过对象尺寸的内容，超出的部分隐藏掉
  3. overflow：scroll
    a. 不管内容是否超出，总是显示滚动条
  4. overflow：auto
    a. 超出自动显示滚动条，不超出不显示滚动条

4、三者差异

  1. display显示隐藏元素，但是不保留位置
  2. visibility显示隐藏元素，但是保留原来的位置
  3. overflow溢出显示隐藏，但是只是对于溢出的部分处理

六、子绝父相的由来

子绝父相：子级是绝对定位（absolute）的话，父级要用相对定位（relative）
相对定位经常用来作为绝对定位的父级

  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内显示
  3. 父盒子布局时，需要占有位置， 如果父盒子是绝对定位的话，父盒子会跑到子盒子的下边，因此父盒子只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

相关文章：

【前端】深入理解CSS定位

目录 一、前言二、定位组成1、定位模式1.1、静态定位static①、语法定义②、特点 1.2、相对定位relative①、语法定义②、特点③、代码示例 1.3、绝对定位absolute①、语法定义②、特点③、代码示例1&#xff09;、没有祖先元素或者祖先元素没有定位2&#xff09;、祖先元素有定…...

编程日记 2023/8/18 11:29:51

【问题】分布式事务的场景下如何保证读写分离的数据一致性

我的理解这个题目可以获得以下关键字&#xff1a;分布式处理、读写分离、数据一致性 那么就从”读写分离“做切入口吧&#xff0c;按我的理解其实就是在保证数据一致性的前提下两个&#xff08;或以上&#xff09;的数据库分别肩负不同的数据处理任务。太过久远的就不说了&…...

编程日记 2023/8/18 11:28:49

常见的Web安全漏洞有哪些，Web安全漏洞常用测试方法介绍

Web安全漏洞是指在Web应用程序中存在的可能被攻击者利用的漏洞&#xff0c;正确认识和了解这些漏洞对于Web应用程序的开发和测试至关重要。 一、常见的Web安全漏洞类型&#xff1a; 1、跨站脚本攻击(Cross-Site Scripting&#xff0c;XSS)&#xff1a;攻击者通过向Web页面注入…...

编程日记 2023/8/18 11:27:48

随机微分方程

应用随机过程|第7章 随机微分方程 见知乎&#xff1a;https://zhuanlan.zhihu.com/p/348366892?utm_sourceqq&utm_mediumsocial&utm_oi1315073218793488384...

编程日记 2023/8/18 11:26:47

下载安装并使用小乌龟TortoiseGit

1、下载TortoiseGit安装包 官网&#xff1a;Download – TortoiseGit – Windows Shell Interface to Githttps://tortoisegit.org/download/ 2、小乌龟汉化包 在官网的下面就有官方提供的下载包 3、安装...

编程日记 2023/8/18 11:25:46

npm ERR!Cannot read properties of null(reading ‘pickAlgorithm’)报错问题解决

当在使用npm包管理器或执行npm命令时&#xff0c;有时候会遇到“npm ERR!Cannot read properties of null(reading ‘pickAlgorithm’)”这个错误提示&#xff0c;这是一个常见的npm错误。 这个错误提示通常说明在使用npm包管理器时&#xff0c;执行了某个npm命令&#xff0c;…...

编程日记 2023/8/18 11:24:45

web前端tips：js继承——组合继承

上篇文章给大家分享了 js继承中的借用构造函数继承 web前端tips&#xff1a;js继承——借用构造函数继承 在借用构造函数继承中&#xff0c;我提到了它的缺点 无法继承父类原型链上的方法和属性&#xff0c;只能继承父类构造函数中的属性和方法 父类的方法无法复用&#xff0…...

编程日记 2023/8/18 11:23:44

（7）(7.3) 自动任务中的相机控制

文章目录 前言 7.3.1 概述 7.3.2 自动任务类型 7.3.3 创建合成图像 前言 本文介绍 ArduPilot 的相机和云台命令&#xff0c;并说明如何在 Mission Planner 中使用这些命令来定义相机勘测任务。这些说明假定已经连接并配置了相机触发器和云台(camera trigger and gimbal hav…...

编程日记 2023/8/18 11:22:42

Python 爬虫小练

Python 爬虫小练 获取贝壳网数据 使用到的模块 标准库 Python3 标准库列表 os 模块&#xff1a;os 模块提供了许多与操作系统交互的函数&#xff0c;例如创建、移动和删除文件和目录&#xff0c;以及访问环境变量等。math 模块&#xff1a;math 模块提供了数学函数&#xf…...

编程日记 2023/8/18 11:21:38

vue3 事件处理 @click

在Vue 3中&#xff0c;事件处理可以通过click指令来实现。click指令用于监听元素的点击事件&#xff0c;并在触发时执行相应的处理函数。 下面是一个简单的示例&#xff0c;展示了如何在Vue 3中处理点击事件&#xff1a; <template><button click"handleClick&…...

编程日记 2023/8/18 11:20:37

【第三阶段】kotlin语言使用replace完成加解密操作

fun main() {val password"ASDAFWEFWVWGEGSDFWEFEWGFS"println("原始密码&#xff1a;$password")//加密操作,就是把字符替换成数字&#xff0c;打乱加密var newPsdpassword.replace(Regex("[ADWF]")){when(it.value){//it.value 这里的每一个字…...

编程日记 2023/8/18 11:19:36

springBoot是如何实现自动装配的

目录 1 什么是自动装配 2 Spring自动装配原理 2.1 SpringBootConfiguration ​编辑 2.2 EnableAutoConfiguration 2.2.1 AutoConfigurationPackage 2.2.2 Import({AutoConfigurationImportSelector.class}) 2.3 ComponentScan 1 什么是自动装配 自动装配就是将官方写好的的…...

编程日记 2023/8/18 11:18:35

基于python+MobileNetV2算法模型实现一个图像识别分类系统

一、目录 算法模型介绍模型使用训练模型评估项目扩展 二、算法模型介绍 图像识别是计算机视觉领域的重要研究方向&#xff0c;它在人脸识别、物体检测、图像分类等领域有着广泛的应用。随着移动设备的普及和计算资源的限制&#xff0c;设计高效的图像识别算法变得尤为重要。…...

编程日记 2023/8/18 11:17:33

管理类联考——逻辑——真题篇——按知识分类——汇总篇——二、论证逻辑——归纳评价——归纳谬误

文章目录 第一节　归纳谬误题-归纳评价-归纳谬误题-归纳评论-归纳谬误-比率→数量，从基数找问题真题（2019-39）-归纳评论-归纳谬误-先归纳题干错误-诉诸人身分成：①诉诸权威：某人在某方面很权威，他做什么都是对的。②人身攻击：因为过往履历有问题，所以做什么都是错的。③…...

编程日记 2023/8/18 11:16:30

C++适配器模式

1 简介&#xff1a; 适配器模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换为客户端所期望的另一个接口。适配器模式允许不兼容的类能够协同工作&#xff0c;通过适配器类来实现接口的转换和适配。 2 实现步骤&#xff1a; 以下是使用C实现适配器模式的步骤&…...

编程日记 2023/8/18 11:15:29

cocos creator 设置精灵镜像翻转效果

在 Cocos Creator 中&#xff0c;你可以通过代码来设置精灵节点的镜像翻转效果。具体来说&#xff0c;你可以使用精灵节点的 setScale 方法来实现这一点。以下是在代码中设置水平镜像翻转和垂直镜像翻转的示例&#xff1a; // 获取精灵节点的引用 let spriteNode cc.find(&qu…...

编程日记 2023/8/18 11:14:27

kafka的位移

文章目录 概要消费位移__consumer_offsets主题位移提交 概要 本文主要总结kafka的位移是如何管理的&#xff0c;在broker端如何通过命令行查看到位移信息&#xff0c;并从代码层面总结了位移的提交方式。 消费位移 对于 Kafka 中的分区而言&#xff0c;它的每条消息都有唯一…...

编程日记 2023/8/18 11:13:26

大数据平台运维实训室建设方案

一、概况 本实训室的主要目的是培养大数据平台运维项目的实践能力,以数据计算、分析、挖掘和可视化的案例训练为辅助。同时,实训室也承担相关考评员与讲师培训考试、学生认证培训考试、社会人员认证培训考试、大数据技能大赛训练、大数据专业课程改革等多项任务。 实训室旨在培…...

编程日记 2023/8/18 11:12:23

dll调用nodejs的回调函数

nodejs使用ffi调用dll。dll中有回调函数调用js中的方法。 c语言中cdll.h文件 extern "C" {typedef void(*JsCall)(int index); //这个就是要传入的类型结构extern __declspec(dllimport) int Add(int a, int b);extern __declspec(dllexport) void CallBackTest(Js…...

编程日记 2023/8/18 11:11:22

网络安全--linux下Nginx安装以及docker验证标签漏洞

目录 一、Nginx安装 二、docker验证标签漏洞 一、Nginx安装 1.首先创建Nginx的目录并进入&#xff1a; mkdir /soft && mkdir /soft/nginx/cd /soft/nginx/ 2.下载Nginx的安装包&#xff0c;可以通过FTP工具上传离线环境包&#xff0c;也可通过wget命令在线获取安装包…...

编程日记 2023/8/18 11:10:20

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/9 10:11:30

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/9/9 14:47:30

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/14 12:35:26

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/8/25 12:12:12

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/9/3 11:05:35

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/9/13 17:41:22

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/8/9 22:34:22