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

【前端】深入理解CSS定位

news 2025/7/12 15:10:44

目录

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/7/11 18:26:08

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/6/20 17:53:24

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/7/9 9:30:13

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/9 17:42:02

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/7/12 15:09:09

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/10 6:13:46

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/7/6 1:55:51

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/10 9:30:33

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/7/3 12:34:43

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/7/9 16:47:16