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

深入掌握CSS定位：构建精密布局的核心技术

article 2025/10/1 7:39:52

一、定位的定义

定位（Positioning）是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位，可以将元素放置在页面的任意位置，并控制其与其他元素的层叠关系。

二、定位的特点与作用

自由摆放位置：
允许元素摆放在网页的任意位置，不受标准流或Flex布局的限制。
解决层叠问题：
定位后的元素层级较高，可以覆盖在其他未定位的元素之上。
固定位置显示：
可以让元素始终固定在浏览器窗口的某个位置，不随页面滚动而移动。

三、常用的定位类型

3.1、不同定位总视图

定位类型	属性值	参照物	是否脱标	显示模式变化	常见用途示例
相对定位	`relative`	元素自身原来的位置	否	无	微调元素位置，作为绝对定位的祖先容器
绝对定位	`absolute`	最近已定位的祖先元素或视口	是	类似 `inline-block`	精确定位子元素，实现弹出菜单等效果
固定定位	`fixed`	浏览器视口	是	类似 `inline-block`	固定导航栏、返回顶部按钮等

3.2、相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>相对定位示例</title><style>/* 相对定位：1、相对与自身原来的位置 2、相对定位不会脱标 */.box1 {width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */top: 50px;left: 100px;}.box2{width: 200px;height: 200px;background-color: lightblue;position: relative; /* 启用相对定位 */left: 200px;}</style>
</head>
<body><div class="box1">相对定位的盒子1</div><div class="box2">相对定位的盒子2</div>
</body>
</html>

相对定位特点：

1、相对与自身原来的位置

2、相对定位不会脱标

3.3、绝对定位

父容器没有定位时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>绝对定位示例</title><style>/* 绝对定位：1、相对与父容器的定位（当父容器中没有其他定位的时候，父容器有定位时以有定位的父容器作为参照物）2、不会脱标 */.parent {width: 500px; height: 500px;background-color: #95d349;position: relative; /* 父容器使用相对定位 */margin: 100px auto;}.child1 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 50px;left: 50px;}.child2 {width: 200px;height: 200px;background-color: lightcoral;position: absolute; /* 子元素使用绝对定位 */top: 100px;left: 100px;}</style>
</head>
<body><div class="parent"><div class="child1">绝对定位的子盒子1</div><div class="child2">绝对定位的子盒子2</div></div>
</body>
</html>

父容器有定位的时（子绝父相）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位（子绝父相）</title><style>* {margin: 0;padding: 0;}img {width: 400px;}.news {position: relative;border: 1px solid #000000;margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}/* 1. 脱标，不占位2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置3. 显示模式特点改变：宽高生效（具备了行内块的特点）*/.news span {position: absolute;top: 0;right: 0;/* display: block; */width: 92px;height: 32px;background-color: rgba(0,0,0,0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./images/news.jpg" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html>

绝对定位特点：

1. 脱标，不占位
2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变：宽高生效（具备了行内块的特点）

3.4、固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>固定定位示例</title><style>body {height: 2000px; /* 让页面可以滚动 */}.fixed-nav {width: 100%;height: 60px;background-color: #333;color: white;text-align: center;line-height: 60px;position: fixed; /* 固定定位 */top: 0;left: 0;z-index: 1000; /* 保证在其他内容之上 */}</style>
</head>
<body><div class="fixed-nav">我是固定导航栏</div><p style="margin-top: 80px;">向下滚动看看效果吧...</p>
</body>
</html>

四、定位居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>58-定位居中</title><style>img {/* 1、绝对定位 */position: absolute;/* 2、水平、垂直边偏移为50% */top: 50%;left: 50%;/* 3、子级向左、上移动自身尺寸的一半 *//* margin-top: -127px;margin-left: -265px; *//* 更方便，此时的50%就是自己宽度的一半 */transform: translate(-50%, -50%);}</style>
</head>
<body><img src="./images/login.webp" alt="">
</body>
</html>

transform: translate(-50%, -50%);能够快速设置设置元素的居中。

五、z-index堆叠层级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>堆叠层级</title><style>/* 定位的层叠属性默认为后来者居上，想要改变的话可以添加z-index属性值改变 */div{position: absolute;width: 200px;height: 200px;}.box1{background-color:pink;/* 取值是整数，默认是0，取值越大显示顺序越靠上 */z-index:1}.box2{z-index: 0;background-color: skyblue;left:100px;top:100px;}.box3{z-index: 2;background-color: yellow;left:200px;top:200px;}</style>
</head>
<body><div class="box1">div1</div><div class="box2">div2</div><div class="box3">div3</div>
</body>
</html>

六、总结

常用定位：

定位类型	属性值	参照物	是否脱标	显示模式变化	常见用途示例
相对定位	`relative`	元素自身原来的位置	否	无	微调元素位置，作为绝对定位的祖先容器
绝对定位（子绝父相）	`absolute`	最近已定位的祖先元素或添加了定位的视口	是	类似 `inline-block`	精确定位子元素，实现弹出菜单等效果
固定定位	`fixed`	浏览器视口	是	类似 `inline-block`	固定导航栏、返回顶部按钮等

定位居中：

transform: translate(-50%, -50%);

z-index堆叠层级:

取值是整数，默认是0，取值越大显示顺序越靠上

深入掌握CSS定位：构建精密布局的核心技术

一、定位的定义定位（Positioning）是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位，可以将元素放置在页面的任意位置，并控制其与其他元素的层叠关系。二、定位的特点与作用自由摆放位置： 允许元素摆放…...

编程日记 2025/9/23 3:20:10

Go语言多线程爬虫与代理IP反爬

有个朋友想用Go语言编写一个多线程爬虫，并且使用代理IP来应对反爬措施。多线程在Go中通常是通过goroutine实现的，所以应该使用goroutine来并发处理多个网页的抓取。然后，代理IP的话，可能需要一个代理池，从中随机选择代…...

编程日记 2025/9/16 17:49:37

配置集群(yarn)

在配置 YARN 集群前，要先完成以下准备工作： 集群环境规划：明确各节点的角色，如 ResourceManager、NodeManager 等。网络环境搭建：保证各个节点之间能够通过网络互通。时间同步设置：安装 NTP 服务&#xff0…...

编程日记 2025/7/2 22:31:00

node.js 实战——express图片保存到本地或服务器（七牛云、腾讯云、阿里云）

本地 ✅ 使用formidable 读取表单内容 npm i formidable ✅ 使用mime-types 获取图片后缀 npm install mime-types✅ js 中提交form表单 document.getElementById(uploadForm).addEventListener(submit, function(e){e.preventDefault();const blob preview._blob;if(!blob)…...

编程日记 2025/9/16 0:11:09

CSS3 伪类和使用场景

CSS3 伪类（Pseudo-classes）大全 CSS3 引入了许多新的伪类，以下是完整的 CSS3 伪类分类列表（包括 CSS2 的伪类）： 一、结构性伪类（Structural Pseudo-classes） 这些伪类根据元素在文…...

编程日记 2025/7/8 14:52:54

Shadertoy着色器移植到Three.js经验总结

Shadertoy是一个流行的在线平台，用于创建和分享WebGL片段着色器。里面有很多令人惊叹的画面，甚至3D场景。本人也移植了几个ShaderToy上的着色器。本文将详细介绍移植过程中需要注意的关键点。 1. 基本结构差异想要移植ShaderToy的shader到three.js&am…...

编程日记 2025/9/18 0:39:22

电脑端音乐播放器推荐：提升你的听歌体验！

在快节奏的职场环境中，许多上班族都喜欢用音乐为工作时光增添色彩。今天要分享的这款音乐工具，或许能为你的办公时光带来意想不到的惊喜。一、软件介绍-澎湃澎湃音乐看似是个普通的播放器，实则藏着强大的资源整合能力。左侧功能栏清晰陈列着…...

编程日记 2025/9/18 21:49:29

VIC-2D 7.0 为平面样件机械试验提供全视野位移及应变数据软件

The VIC-2D系统是一个完全集成的解决方案，它基于优化的相关算法为平面试样的力学测试提供非接触、全场的二维位移和应变数据，可测量关注区域内的每个像素子集的面内位移，并通过多种张量选项计算全场应变。The VIC-2D 系统可测量超过 2000%变形…...

编程日记 2025/10/1 6:50:30

一周学完计算机网络之三：1、数据链路层概述

简单的概述数据链路层是计算机网络体系结构中的第二层，它在物理层提供的基本服务基础上，负责将数据从一个节点可靠地传输到相邻节点。可以将其想象成一个负责在两个相邻的网络设备之间进行数据 “搬运” 和 “整理” 的 “快递中转站”。几个重要概念…...

编程日记 2025/9/16 0:11:17

网卡网孔速率的协商是如何进行的？

网卡与交换机等网络设备之间的速率协商主要通过**自动协商（Auto-Negotiation）**机制实现，其核心是物理层（PHY）芯片之间的信息交互。以下是协商过程的详细解析： 一、自动协商的核心流程 1. 发送配置帧&am…...

编程日记 2025/6/7 9:46:46

单片机-STM32部分：13-1、蜂鸣器

飞书文档https://x509p6c8to.feishu.cn/wiki/V8rpwIlYIiEuXLkUljTcXWiKnSc 一、应用场景大部分的电子产品、家电（风扇、空调、电水壶）都会有蜂鸣器，用于提示设备的工作状态二、原理蜂鸣器是一种将电信号转换为声音信号的器件&#xff0…...

编程日记 2025/9/16 0:11:11

动态IP技术赋能业务创新：解锁企业数字化转型新维度

在数字经济高速发展的今天，IP地址已不再是简单的网络标识符，而是演变为支撑企业数字化转型的核心基础设施之一。动态IP技术凭借其灵活、高效、安全的特性，正在重塑传统业务模式，催生出诸多创新应用场景。本文将深入剖析动态IP的技…...

编程日记 2025/9/16 2:35:03

使用Python删除PDF中多余或空白的页面

目录为什么需要删除 PDF 中的多余或空白页面？ 所需工具环境准备如何使用Python删除PDF中的多余页面实现思路详细实现步骤实现代码如何使用Python检测并删除PDF中的空白页实现思路详细实现步骤实现代码在处理 PDF 文件时，常常会遇到…...

编程日记 2025/9/19 8:25:50

英语复习笔记 1

前言我们知道英语最重要就是单词和阅读理解，因为时间安排和自己懒惰的原因，英语复习实际上进行得非常缓慢。实际上英语复习得比较少，但是我想考一个高分，这样下去肯定是废掉了。所以从今天开始我要好好复习英语。之前有个大佬说…...

编程日记 2025/9/20 19:15:12

UART16550 IP core笔记二

XIN时钟表示use external clk for baud rate选型，IP核会出现Xin时钟引脚 XIN输入被外部驱动，也就是外部时钟源，那么外部时钟必须要满足特定的要求，就是XIN 的range范围是xin<S_AXI_CLK/2,如果不满足这个条件，那么A…...

编程日记 2025/9/18 23:23:09

TDengine 在金融领域的应用

简介金融行业正处于数据处理能力革新的关键时期。随着市场数据量的爆炸式增长和复杂性的日益加深，金融机构面临着寻找能够高效处理大规模、高频次以及多样化时序数据的大数据处理系统的迫切需求。这一选择将成为金融机构提高数据处理效率、优化交易响应时间、提高…...

编程日记 2025/9/19 15:28:10

OSCP - Hack The Box - Sau

主要知识点 CVE-2023-27163漏洞利用systemd提权具体步骤执行nmap扫描，可以先看一下55555端口 Nmap scan report for 10.10.11.224 Host is up (0.58s latency). Not shown: 65531 closed tcp ports (reset) PORT STATE SERVICE VERSION 22/tcp o…...

编程日记 2025/9/16 7:59:33

大模型的Lora如何训练？

大模型LoRA（Low-Rank Adaptation）训练是一种参数高效的微调方法，通过冻结预训练模型权重并引入低秩矩阵实现轻量化调整。以下是涵盖原理、数据准备、工具、参数设置及优化的全流程指南：一、LoRA的核心原理低秩矩阵分解在原始权重矩阵$ W 旁添加两个低秩矩阵旁添加两个…...

编程日记 2025/6/30 7:05:16

分词器工作流程和Ik分词器详解

切分词语，normalization 给你一段句子，然后将这段句子拆分成一个一个的单个的单词，同时对每个单词进行 normalization（时态转换，单复数转换），分词器 recall，召回率：搜索的…...

编程日记 2025/7/14 2:54:14

QT6 源（93）篇三：阅读与注释共用体类 QVariant 及其源代码，本类支持比较运算符 ==、!=。

（9） 本类支持比较运算符、! ： 可见， QString 类型里可存储多个 unicode 字符，即使只存储一个 unicode 字符也不等于 QChar。 （10）本源代码来自于头文件 qvariant . h ： #ifndef Q…...

编程日记 2025/9/18 22:10:21

Maven私服搭建与登录全攻略

目录 1.背景2.简介3.安装4.启动总结参考文献 1.背景回顾下maven的构建流程，如果没有私服，我们所需的所有jar包都需要通过maven的中央仓库或者第三方的maven仓库下载到本地，当一个公司或者一个团队所有人都重复的从maven仓库下载jar包&#…...

编程日记 2025/9/17 20:46:44

力扣210（拓扑排序）

210. 课程表 II - 力扣（LeetCode） 这是一道拓扑排序的模板题。简单来说，给出一个有向图，把这个有向图转成线性的排序就叫拓扑排序。如果有向图中有环就没有办法进行拓扑排序了。因此，拓扑排序也是图论中判断有向无环图…...

编程日记 2025/9/22 3:21:31

1.1 文章简介

前因后果链行业需求 → 技能断层 → 课程设计响应 (高薪岗位要求数学基础) → (符号/公式理解困难) → (聚焦原理与应用) 行业驱动因素 • 前因：机器学习/AI等领域的高薪岗位激增，但数学能力成为主要门槛 • 关键矛盾：算法论文中的数学…...

编程日记 2025/9/20 10:05:01

将本地文件上传到云服务器上

使用 SCP 命令（最常用） # 基本语法 scp [本地文件路径] [用户名][服务器IP]:[目标路径]# 示例：上传单个文件 scp /path/to/local/file.txt root192.168.1.100:/path/to/remote/# 上传整个目录 scp -r /path/to/local/directory root192.168.…...

编程日记 2025/7/10 9:24:09

C++ asio网络编程(5)简单异步echo服务器

上一篇文章:C asio网络编程(4)异步读写操作及注意事项文章目录前言一、Session类1.代码2.代码详解3.实现Session类1.构造函数2.handle_read3.介绍一下boost的封装函数和api4.handle_write 二、Server类1.代码2.代码思路详解三、客户端四、运行截图与流程图前言提示&…...

编程日记 2025/9/16 0:11:23