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

【前端】深入理解CSS定位

news 2026/3/29 14:41:10

目录

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

8个单元素CSS加载器终极指南：如何用纯CSS创建高性能动画效果

8个单元素CSS加载器终极指南&#xff1a;如何用纯CSS创建高性能动画效果 【免费下载链接】css-loaders A collection of loading spinners animated with CSS 项目地址: https://gitcode.com/gh_mirrors/cs/css-loaders 在现代Web开发中&#xff0c;CSS加载器已成为提升…...

编程新知 2026/3/29 14:03:19

3大创新方法构建AI训练数据集：老照片修复实战指南

3大创新方法构建AI训练数据集&#xff1a;老照片修复实战指南 【免费下载链接】Bringing-Old-Photos-Back-to-Life Bringing Old Photo Back to Life (CVPR 2020 oral) 项目地址: https://gitcode.com/gh_mirrors/br/Bringing-Old-Photos-Back-to-Life 老照片修复AI项目…...

编程新知 2026/3/29 11:49:43

零成本体验软路由：京东云AX1800 Pro刷iStoreOS OpenWrt的完整教程（含空间扩容技巧）

京东云AX1800 Pro软路由改造全指南&#xff1a;从刷机到空间优化的实战手册 在智能家居和高速网络需求激增的今天&#xff0c;一台性能出色的路由器已成为家庭数字生活的核心枢纽。京东云AX1800 Pro作为一款性价比极高的Wi-Fi 6路由器&#xff0c;其硬件配置远超同价位产品——…...

编程新知 2026/3/29 11:27:19

数模小白别慌！手把手教你用Python和MATLAB搞定国赛美赛（附2022年M奖/省一代码）

数模竞赛入门指南&#xff1a;从零到获奖的Python与MATLAB实战路径 数学建模竞赛对于初学者而言&#xff0c;往往像一座难以攀登的高山。第一次面对赛题时&#xff0c;那种无从下手的迷茫感我至今记忆犹新——三个队友围着一道看似简单的题目&#xff0c;却连该用什么工具、从哪…...

编程新知 2026/3/29 10:59:05

AudioSeal效果展示：对抗白噪声、混响、变速变调攻击的鲁棒性案例

AudioSeal效果展示&#xff1a;对抗白噪声、混响、变速变调攻击的鲁棒性案例 1. 音频水印技术新标杆 想象一下&#xff0c;当你听到一段AI生成的语音时&#xff0c;如何确认它的真实来源&#xff1f;这就是AudioSeal要解决的核心问题。作为Meta开源的语音水印系统&#xff0c…...

编程新知 2026/3/29 7:27:24

3分钟免费制作AI视频：零基础也能成为数字导演

3分钟免费制作AI视频&#xff1a;零基础也能成为数字导演 【免费下载链接】auto-video-generateor 自动视频生成器&#xff0c;给定主题&#xff0c;自动生成解说视频。用户输入主题文字&#xff0c;系统调用大语言模型生成故事或解说的文字&#xff0c;然后进一步调用语音合成…...

编程新知 2026/3/29 7:09:22

本地数据库工具革新：浏览器应用如何3分钟解决SQLite查看难题

本地数据库工具革新&#xff1a;浏览器应用如何3分钟解决SQLite查看难题 【免费下载链接】sqlite-viewer View SQLite file online 项目地址: https://gitcode.com/gh_mirrors/sq/sqlite-viewer 在数字化开发的日常工作流中&#xff0c;SQLite数据库文件查看往往成为效率…...

编程新知 2026/3/29 4:51:27

OpenClaw自动化写作实测：Qwen3-32B生成技术博客全流程

OpenClaw自动化写作实测&#xff1a;Qwen3-32B生成技术博客全流程 1. 为什么选择OpenClaw进行自动化写作 作为一个长期与技术文档打交道的开发者&#xff0c;我一直在寻找能够提升写作效率的工具。传统写作流程中&#xff0c;从选题到发布需要经历资料收集、大纲设计、内容填…...

编程新知 2026/3/29 4:25:06

火绒误删explorer.exe导致Win10黑屏？保姆级修复指南（含安全模式+注册表操作）

火绒误删explorer.exe导致Win10黑屏的全面解决方案 当Windows 10系统突然陷入黑屏状态&#xff0c;只剩鼠标指针孤独地在屏幕上闪烁&#xff0c;这种体验对任何用户来说都堪称噩梦。特别是当发现罪魁祸首竟是日常依赖的安全软件火绒时&#xff0c;更让人措手不及。本文将系统性…...

编程新知 2026/3/29 3:54:48

Go Routine 调度器任务分配策略

Go语言凭借其轻量级线程——Goroutine和高性能调度器&#xff0c;成为高并发编程的热门选择。Goroutine调度器的任务分配策略直接影响程序性能&#xff0c;其核心在于如何高效利用CPU资源&#xff0c;平衡负载并减少上下文切换开销。本文将深入解析调度器的核心机制&#xff0c…...

编程新知 2026/3/29 3:14:34