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

CSS 定位：原理 + 场景 + 示例全解析

article 2025/8/5 0:32:40

一. 什么是CSS定位?

CSS中的position属性用于设置元素的定位方式,它决定了元素在页面中的"定位行为"

为什么需要定位?

  • 常规布局(如 display: block)适用于主结构 
  • 定位适用于浮动按钮,弹出层,粘性标题等场景
  • 帮助我们精确控制元素在页面中的位置 

二. 定位类型全解析

1. static(默认)

特点: 
  • 元素按照文档流自然排列
  • top/left/right/bottom无效 
适用场景: 
  • 默认布局方式,不建议主动设置为static 

2.relative(相对定位)

特点: 
  • 元素仍保留在文档流中
  • 相对于原本位置偏移
  • 通常与absolute结合使用(作为父容器)
适用场景: 
  • 用作absolute的定位基点 
  • 创建局部偏移效果 
示例: 

<div class="relative-box">
  商品
  <span class="badge">NEW</span>
</div>

<style>

    .relative-box {

        position: relative;

        display: inline-block;

        background-color: yellow;

        width: 100px;

        height: 100px;

    }

    .badge {

        position: absolute;

        top: 0px;

        right: 0px;

        background: red;

        color: white;

        padding: 2px 5px;

        border-radius: 50%;

    }

</style>

<body>

    <div class="relative-box">

        商品

        <span class="badge">NEW</span>

    </div>

</body>

3. absoulute(绝对定位)

特点:
  • 脱离文档流
  • 相对于最近的定位(非static)祖先元素定位
  • 不占位置,可重叠 
适用场景 : 
  • 弹出框,下拉菜单,气泡提示,角标等

4. fixed 固定定位

特点: 
  • 相对于浏览器窗口定位
  • 脱离文档流,不随页面滚动变化

适用场景: 

  • 回到顶部按钮 ,悬浮按钮,导航栏等 

示例: 

<button class="back-top">↑</button>

.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 10px;
  background: #333;
  color: white;
  border: none;
  border-radius: 50%;
}

5. sticky(粘性定位)

特点: 
  • 滚到一定位置前是relative,之后变为fixed 
  • 需配合top/bottom 使用
  • 父元素不能overflow: hidden 
适用场景 : 
  • 吸顶标题,导航栏,分类标签等 
示例:

三. 定位与z-index的关系

  • 只有定位元素才能使用z-index 
  • z-index 决定了层叠顺序,数值越大越靠上 
  • absolute,relative,fixed,sticky都可以用z-index 

四. 常见问题与排查技巧 

 

问题原因解决方法
top 无效没有设置定位设置 position
absolute 定位错位父元素没有定位父元素加 position: relative
sticky 无效父元素 overflow取消 overflow: hidden
z-index 无效元素无定位设置定位方式

相关文章：

CSS 定位：原理 + 场景 + 示例全解析

一. 什么是CSS定位? CSS中的position属性用于设置元素的定位方式,它决定了元素在页面中的"定位行为" 为什么需要定位? 常规布局(如 display: block)适用于主结构 定位适用于浮动按钮,弹出层,粘性标题等场景帮助我们精确控制元素在页面中的位置 二. 定位类型全…...

编程日记 2025/7/24 11:16:06

如何在没有 iTunes 的情况下备份 iPhone

我可以在没有 iTunes 的情况下将 iPhone 备份到电脑吗&#xff1f;虽然 iTunes 曾经是备份 iPhone 的主要方法&#xff0c;但它并不是 iOS 用户唯一的备份选项。您可以选择多种方便的替代方案来备份 iPhone&#xff0c;无需使用 iTunes。您可以在这里获得更灵活、更人性化的备份…...

编程日记 2025/8/2 2:26:16

如何把 Mac Finder 用得更顺手？——高效文件管理定制指南

系统梳理提升 Mac Finder 体验的实用设置与技巧&#xff0c;助你用更高效的方式管理文件。文末引出进阶选择 Path Finder。 阅读原文请转到&#xff1a;https://jimmysong.io/blog/customize-finder-for-efficiency/ 作为一个用 Mac 多年的用户&#xff0c;我始终觉得 Finder 虽…...

编程日记 2025/8/1 0:29:04

赋能大型语言模型与外部世界交互——函数调用的崛起

大型语言模型 (LLM) 近年来在自然语言处理领域取得了革命性的进展&#xff0c;展现出强大的文本理解、生成和对话能力。然而&#xff0c;这些模型在与外部实时数据源和动态系统交互方面存在固有的局限性 1。它们主要依赖于训练阶段学习到的静态知识&#xff0c;难以直接访问和利…...

编程日记 2025/6/12 11:24:01

04 Deep learning神经网络编程基础 梯度下降 --吴恩达

梯度下降在深度学习的应用 梯度下降是优化神经网络参数的核心算法，通过迭代调整参数最小化损失函数。 核心公式 参数更新规则： θ t + 1 = θ t − η ∇ J ( θ...

编程日记 2025/6/12 1:00:23

手拉手处理RuoYi脚手架常见文问题

若依前后端分离版开发入门 基础环境&#xff1a;JDK1.8mysqlRedisMavenVue 取消登录验证码 后端 修改ruoyi-ui项目中的login.vue 在ruoyi-ui项目>src>views中找到login.vue文件 1、注释验证码展示及录入部分 2、 注释code必填校验&#xff0c;默认验证码开关为false …...

编程日记 2025/8/1 8:32:23

录制mp4

目录 单线程保存mp4 多线程保存mp4 rtsp ffmpeg录制mp4 单线程保存mp4 import cv2 import imageiocv2.namedWindow(photo, 0) # 0窗口大小可以任意拖动&#xff0c;1自适应 cv2.resizeWindow(photo, 1280, 720) url "rtsp://admin:aa123456192.168.1.64/h264/ch1/main…...

编程日记 2025/6/12 15:08:17

Dynamics 365 Finance + Power Automate 自动化凭证审核

&#x1f680; Dynamics 365 Finance Power Automate 自动化凭证审核 &#x1f4d1; 目录 &#x1f680; Dynamics 365 Finance Power Automate 自动化凭证审核1. 依赖 &#x1f527;2. 目标 &#x1f3af;3. 系统架构 &#x1f3d7;️4. 凭证审批全流程 &#x1f6e0;️4.1 …...

编程日记 2025/7/20 1:47:59

使用 Python + SQLAlchemy 创建知识库数据库（SQLite）—— 构建本地知识库系统的基础《一》

&#x1f4da; 使用 Python SQLAlchemy 创建知识库数据库&#xff08;SQLite&#xff09;—— 构建本地知识库系统的基础 &#x1f9e0; 一、前言 随着大模型技术的发展&#xff0c;越来越多的项目需要构建本地知识库系统来支持 RAG&#xff08;Retrieval-Augmented Generat…...

编程日记 2025/7/31 6:16:33

使用柏林噪声生成随机地图

简单介绍柏林噪声 柏林噪声&#xff08;Perlin Noise&#xff09;是一种由 Ken Perlin 在1983年提出的梯度噪声&#xff08;Gradient Noise&#xff09;算法&#xff0c;用于生成自然、连续的随机值。它被广泛用于计算机图形学中模拟自然现象&#xff08;如地形、云层、火焰等…...

编程日记 2025/8/4 14:48:51

P3 QT记事本（3.4）

3.4 文件选择对话框 QFileDialog 3.4.1 QFileDialog 开发流程 使用 QFileDialog 的基本步骤通常如下&#xff1a; 实例化 &#xff1a;首先&#xff0c;创建一个 QFileDialog 对象的实例。 QFileDialog qFileDialog;设置模式 &#xff1a;根据需要设置对话框的模式&…...

编程日记 2025/7/19 4:54:13

C++课设：实现简易文件加密工具（凯撒密码、异或加密、Base64编码）

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏介绍&#xff1a;《编程项目实战》 目录 一、初识文件加密&#xff1a;为什么需要…...

编程日记 2025/7/27 11:30:05

H_Prj06_03 8088单板机串口读取8088ROM复位内存

1.8088CPU复位时&#xff0c;CSFFFFH,IP0000H,因此在ROM的逻辑地址FFFF&#xff1a;0000&#xff08;FFF0H&#xff09;处一般要防止一个长跳转指令LJMP&#xff08;机器码位EAH&#xff09; 2.写一个完整的8086汇编程序&#xff0c;通过查询方式检测串口接收符串‘r’&#x…...

编程日记 2025/8/4 20:50:07

构建 MCP 服务器：第 3 部分 — 添加提示

这是我们构建 MCP 服务器的四部分教程的第三部分。在第一部分中&#xff0c;我们使用基本资源创建了第一个MCP 服务器&#xff1b;在第二部分中&#xff0c;我们添加了资源模板并改进了代码组织。现在&#xff0c;我们将进一步重构代码并添加提示功能。 什么是 MCP 提示&#…...

编程日记 2025/7/28 16:05:35

xcode 各版本真机调试包下载

下载地址 https://github.com/filsv/iOSDeviceSupport 使用方法&#xff1a; 添加到下面路径中&#xff0c;然后退出重启xcode /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport...

编程日记 2025/7/26 11:52:28

基于React + FastAPI + LangChain + 通义千问的智能医疗问答系统

&#x1f4cc; 文章摘要&#xff1a; 本文详细介绍了如何在前端通过 Fetch 实现与 FastAPI 后端的 流式响应通信&#xff0c;并支持图文多模态数据上传。通过构建 multipart/form-data 请求&#xff0c;配合 ReadableStream 实时读取 AI 回复内容&#xff0c;实现类似 ChatGPT…...

编程日记 2025/7/29 21:10:02

C# 中替换多层级数据的 Id 和 ParentId，保持主从或父子关系不变

在C#中替换多层级数据的Id和ParentId&#xff0c;同时保持父子关系不变&#xff0c;可以通过以下步骤实现&#xff1a; 创建旧Id到新Id的映射&#xff1a;遍历所有节点&#xff0c;为每个旧Id生成唯一的新Id&#xff0c;并存储在字典中。 替换节点的Id和ParentId&#xff1a;…...

编程日记 2025/7/31 4:37:49

Scade 语言概念 - 方程(equation)

在 Scade 6 程序中自定义算子(Operator)的定义、或数据流定义(data_def)的内容中&#xff0c;包含一种基本的语言结构&#xff1a;方程(equation)(注1)。在本篇中&#xff0c;将叙述 Scade 语言方程的文法形式&#xff0c;以及作用。 注1: 对 Scade 中的 equation, 或 equation…...

编程日记 2025/7/30 22:21:48

PG 分区表的缺陷

简介 好久没发文&#xff0c;是最近我实在不知道写点啥。随着国产化进程&#xff0c;很多 oracle 都在进行迁移&#xff0c;最近遇到了一个分区表迁移之后唯一性的问题。oracle 数据库中创建主键或者唯一索引&#xff0c;不需要引用分区键&#xff0c;但是 PG 就不行&#xff…...

编程日记 2025/7/25 5:21:04

从Copilot到Agent，AI Coding是如何进化的？

编程原本是一项具有一定门槛的技能&#xff0c;但借助 AI Coding 产品&#xff0c;新手也能写出可运行的代码&#xff0c;非专业人员如业务分析师、产品经理&#xff0c;也能在 AI 帮助下直接生成简单应用。 这一演变对软件产业产生了深远影响。当 AI 逐步参与代码生成、调试乃…...

编程日记 2025/7/30 14:39:43

Qt（part 2）1、Qwindow（菜单栏，工具栏，状态栏），铆接部件，核心部件 ，2、添加资源文件 3、对话框

1、Qwindow tips&#xff1a;1&#xff0c;首先为什么创建出的对象基本都是指针形式&#xff0c;个人觉得是对象树的原因&#xff08;自动释放内存&#xff09;&#xff0c;指针来访问成员函数->的形式。2&#xff0c;菜单栏只能一个的&#xff0c;放窗口基本Set&#xff0c…...

编程日记 2025/7/27 23:05:49

【图片识别Excel】批量提取图片中的文字，图片设置识别区域，识别后将文字提取并保存Excel表格，基于WPF和OCR识别的应用

应用场景 在办公自动化、文档处理、数据录入等场景中&#xff0c;经常需要从大量图片中提取文字信息。例如&#xff1a; 批量处理扫描的表单、合同、发票等文档从图片集中提取特定区域的文字数据将纸质资料快速转换为电子文本并整理归档 通过设置识别区域&#xff0c;可以精…...

编程日记 2025/8/4 1:17:31

深入理解 Java 多线程：原理剖析与实战指南

深入理解 Java 多线程&#xff1a;原理剖析与实战指南 一、引言 在现代软件开发中&#xff0c;多线程编程已经成为提升应用性能与响应能力的重要手段。Java 作为一门成熟的编程语言&#xff0c;自 JDK 1.0 起就提供了对多线程的原生支持。本文将深入剖析 Java 多线程的底层原…...

编程日记 2025/6/13 4:54:05

Qt/C++学习系列之Excel使用记录

Qt/C学习系列之Excel使用记录 前言The process was ended forcefully.解决方式断点查语句问题 总结 前言 在项目中解析条目达50多条&#xff0c;并且都需要将对应的结果进行显示。为了将结果显示的更加清晰&#xff0c;考虑采用QTableWidget进行表格设置&#xff0c;而在使用过…...

编程日记 2025/8/4 1:17:29

跳转指令四维全解：从【call/jmp 】的时空法则到内存迷宫导航术

一、核心概念&#xff1a;代码世界的空间定位法则 在汇编世界里&#xff0c;我们可以把内存想象成一栋巨大的图书馆&#xff1a; CS&#xff08;代码段寄存器&#xff09; 楼层编号 IP&#xff08;指令指针&#xff09; 房间编号 当前执行位置 CS:IP&#xff08;如3楼201…...

编程日记 2025/8/4 1:17:28

LabVIEW实时系统数据监控与本地存储

基于LabVIEW Real-Time 模块&#xff0c;面向工业自动化、嵌入式测控等场景&#xff0c;提供实时数据采集、监控与本地存储的完整实现路径。通过分层任务调度、TDMS 文件格式应用及跨平台兼容性设计&#xff0c;确保系统在实时性、可靠性与数据管理效率间达到平衡。文中以 Comp…...

编程日记 2025/8/4 1:17:26

从 Revit 到 3DTiles：GISBox RVT 切片器如何让建筑图元在 Web 端展示

在GIS&#xff08;地理信息系统&#xff09;行业蓬勃发展的当下&#xff0c;数据处理与展示的效率和精准度成为关键。GISBox作为一款功能强大的一站式三维GIS数据编辑、转换、发布平台&#xff0c;凭借其独特的“RVT切片器”功能&#xff0c;在RVT图元处理方面也有着不俗的表现…...

编程日记 2025/8/3 20:56:48

Appium+python自动化（十二）- Android UIAutomator

Android团队在4.1版本&#xff08;API 16&#xff09;中推出了一款全新的UI自动化测试工具UiAutomator&#xff0c;用来帮助开发人员更有效率的完成App的Debug工作&#xff0c;同时对于测试人员也是一大福音&#xff0c;为什么这么说呢&#xff1f; UiAutomator提供了以下两种…...

编程日记 2025/8/4 1:17:23

在C语言中使用UUID作为AES加密密钥

在C语言中使用UUID作为AES加密密钥 编译依赖安装示例代码编译和运行关键点说明![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0df1f1d803cd40688f6d58a9d0e1f1d9.png)注意事项编译依赖安装 运行环境位centos8 Linux 4.18.0-348.7.1.el8_5.x86_64 #1 SMP Wed Dec …...

编程日记 2025/6/13 13:43:37

Nginx+Tomcat负载均衡集群

目录 一、Tomcat 基础与单节点部署 &#xff08;一&#xff09;Tomcat 概述 &#xff08;二&#xff09;单节点部署案例 1. 案例环境 2. 实施准备 3. 安装 JDK 4. 查看 JDK 安装情况 5. 安装配置 Tomcat 6. 启动 Tomcat 7. 访问测试 8. 关闭 Tomcat &#xff08;三…...

编程日记 2025/6/14 20:38:44