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

【前端】深入理解CSS定位

news 文章来源：https://blog.csdn.net/weixin_45490023/article/details/132354450 2025/5/14 8:55:02

目录

  • 一、前言
  • 二、定位组成
    • 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

多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测

多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现WOA-CNN-BiGRU-Attention多变量时间序列预测 1.程…...

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

金蝶软件实现Excel数据复制分录信息粘贴到单据体分录行中

>>>适合KIS云专业版V16.0|KIS云旗舰版V7.0|K/3 WISE 14.0等版本<<< 实现Excel数据复制分录信息粘贴到金蝶单据体分录中,在采购订单|采购入库单|销售订单|销售出库单等类型单据中,以少量的必要字段在excel表格中按模板填列好,很方便快捷地复制到金蝶单据表体…...

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

【Linux操作系统】深入探索Linux进程：创建、共享与管理

进程的创建是Linux系统编程中的重要概念之一。在本节中&#xff0c;我们将介绍进程的创建、获取进程ID和父进程ID、进程共享、exec函数族、wait和waitpid等相关内容。 文章目录 1. 进程的创建1.1 函数原型和返回值1.2 函数示例 2. 获取进程ID和父进程ID2.1 函数原型和返回值2.…...

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

【云原生、k8s】Calico网络策略

第四阶段 时 间&#xff1a;2023年8月17日 参加人&#xff1a;全班人员 内 容&#xff1a; Calico网络策略 目录 一、前提配置 二、Calico网络策略基础 1、创建服务 2、启用网络隔离 3、测试网络隔离 4、允许通过网络策略进行访问 三、Calico网络策略进阶 1、创…...

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

Unity3D 测试总结

windows 平台上导出 exe 文件 在Unity界面中&#xff0c;点击菜单栏的“File”&#xff0c;选择“Build Settings”。 在“Build Settings”窗口中&#xff0c;选择要生成的平台&#xff08;例如Windows&#xff09;。 点击“Player Settings”按钮&#xff0c;进入“Player Se…...

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

【无线点对点网络时延分析和可视化】模拟无线点对点网络中的延迟以及物理层和数据链路层之间的相互作用（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

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

在思科（Cisco）路由器中使用 SNMP

什么是SNMP SNMP&#xff0c;称为简单网络管理协议&#xff0c;被发现可以解决具有复杂网络设备的复杂网络环境&#xff0c;SNMP 使用标准化协议来查询网络上的设备&#xff0c;为网络管理员提供保持网络环境稳定和远离停机所需的重要信息。 为什么要在思科设备中启用SNMP S…...

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

【压测】wg/wrk 轻量级压测

wg/wrk 轻量级压测 说明&#xff1a;环境是 centos&#xff0c;不过现在 centos 免费版本不再更新和维护了&#xff0c;所以大家可以用阿里云的或者用 ubuntu 内核 用的 https://github.com/wg/wrk.git 有 35k star 然后据我了解&#xff0c;windows 用 wrk 压测有点麻烦&…...

编程日记 2023/8/18 11:02:09

Redis可以用作消息队列吗？如何实现简单的消息队列功能？

是的&#xff0c;Redis可以被用作简单的消息队列。下面是一种实现简单消息队列功能的方式&#xff1a; 生产者&#xff08;Producer&#xff09;端&#xff1a; 使用LPUSH命令将消息推送到一个列表中&#xff0c;作为消息队列的实现。例如&#xff0c;使用LPUSH命令将消息推送到…...

编程日记 2023/8/18 11:01:05

[Java基础]对象转型

系列文章目录 【Java基础】Java总览_小王师傅66的博客-CSDN博客 [Java基础]基本概念(上)(标识符,关键字,基本数据类型)_小王师傅66的博客-CSDN博客 [Java基础]基本概念(下)运算符,表达式和语句,分支,循环,方法,变量的作用域,递归调用_小王师傅66的博客-CSDN博客 Java字节码…...

编程日记 2023/8/18 11:00:04