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

CSS- 4.3 绝对定位（position: absolute）学校官网导航栏实例

article 2025/9/20 21:14:21

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

系列文章目录

前言

一、CSS 定位之绝对定位（absolute）详解

1、绝对定位（absolute）的基本概念

2、绝对定位的核心特性

1. 脱离文档流

2. 定位基准点

3. 定位属性

3、绝对定位的常见应用场景

1. 创建浮动元素

2. 创建下拉菜单

4. 创建固定宽高比的元素

4、绝对定位的注意事项

1. 父元素需设置定位

2. 层叠上下文

3. 响应式设计中的挑战

5、绝对定位与其他定位方式的比较

6、最佳实践建议

二、代码实例

1.练习代码实例如下：

2.学校导航栏实例如下：

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、CSS 定位之绝对定位（absolute）详解

1、绝对定位（absolute）的基本概念

绝对定位（position: absolute）是CSS中一种强大的定位方式，它允许元素脱离正常的文档流，相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）定位。

2、绝对定位的核心特性

1. 脱离文档流

绝对定位的元素不再占据原始文档空间，其他元素会忽略它的存在，就好像它从文档中"消失"了一样
示例：

html

<div class="container"><div class="normal">普通元素</div><div class="absolute">绝对定位元素</div><div class="normal">另一个普通元素</div>
</div>

css

.container { border: 1px solid #ccc; padding: 20px; }
.normal { background: #eee; margin: 10px 0; padding: 10px; }
.absolute { position: absolute; top: 0; right: 0; background: #f00; color: white; padding: 10px; 
}

效果：绝对定位元素会覆盖在普通元素上，且不占用空间

2. 定位基准点

绝对定位元素会相对于最近的已定位祖先元素定位
"已定位"指的是祖先元素的position值为relative、absolute、fixed或sticky
如果没有这样的祖先元素，则相对于初始包含块（通常是视口）

3. 定位属性

使用top、right、bottom、left属性来精确控制位置
示例：

css

.absolute {position: absolute;top: 50px;left: 100px;width: 200px;height: 100px;
}

3、绝对定位的常见应用场景

1. 创建浮动元素

css

.float-box {position: absolute;top: 20px;right: 20px;width: 300px;background: rgba(255,255,255,0.8);padding: 15px;
}

2. 创建下拉菜单

html

<div class="dropdown"><button>菜单</button><ul class="dropdown-menu"><li>选项1</li><li>选项2</li><li>选项3</li></ul>
</div>

css

.dropdown {position: relative;display: inline-block;
}
.dropdown-menu {position: absolute;top: 100%;left: 0;display: none;background: white;box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-menu {display: block;
}

鼠标悬停在菜单按钮式，出现选项

3. 创建工具提示

html

<span class="tooltip" data-tooltip="这是提示文本">悬停查看</span><!-- 这里如果弹出的文本看不到，可以添加<br>符号-->

css

.tooltip {position: relative;cursor: pointer;
}
.tooltip::after {content: attr(data-tooltip);position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background: #333;color: white;padding: 5px 10px;border-radius: 4px;font-size: 14px;white-space: nowrap;opacity: 0;transition: opacity 0.3s;
}
.tooltip:hover::after {opacity: 1;
}

鼠标悬停时，上方弹出提示句：

4. 创建固定宽高比的元素

css

.aspect-ratio-box {position: relative;width: 100%;padding-top: 56.25%; /* 16:9 宽高比 */
}
.aspect-ratio-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

4、绝对定位的注意事项

1. 父元素需设置定位

为了让绝对定位元素相对于特定父元素定位，父元素需要设置position: relative（或其他非static值）
示例：

html

<div class="parent"><div class="child">绝对定位子元素</div>
</div>

css

.parent {position: relative;height: 200px;border: 1px solid #ccc;
}
.child {position: absolute;top: 20px;left: 20px;background: #f00;color: white;padding: 10px;
}

2. 层叠上下文

绝对定位元素会创建新的层叠上下文（当设置了z-index值时）
示例：

css

.box1 {position: absolute;top: 0;left: 0;z-index: 1;background: rgba(255,0,0,0.5);
}
.box2 {position: absolute;top: 50px;left: 50px;z-index: 2;background: rgba(0,0,255,0.5);
}

3. 响应式设计中的挑战

绝对定位元素可能不适合响应式布局，因为它们不随页面布局变化而自动调整
在响应式设计中，可能需要使用媒体查询调整绝对定位元素的位置

5、绝对定位与其他定位方式的比较

定位方式	是否脱离文档流	定位基准点	适用场景
static (默认)	否	正常文档流	默认布局
relative	否	相对于自身原始位置	微调元素位置
absolute	是	相对于最近的已定位祖先元素	创建浮动元素、工具提示等
fixed	是	相对于视口	固定导航栏、返回顶部按钮
sticky	否(滚动时是)	相对于最近的滚动祖先和视口	粘性头部、侧边栏

6、最佳实践建议

明确基准点：确保绝对定位元素有明确的定位基准点（通常通过父元素设置position: relative）
避免过度使用：绝对定位会破坏文档流，过度使用可能导致布局难以维护
考虑响应式：在响应式设计中，可能需要为不同屏幕尺寸设置不同的定位值
结合其他属性：常与z-index、transform等属性配合使用
性能考虑：绝对定位元素可能影响渲染性能，特别是在大量使用时

绝对定位是CSS布局中非常有用的工具，但需要谨慎使用，特别是在需要响应式设计的项目中。理解其工作原理和与其他定位方式的区别，可以帮助开发者更有效地使用它来实现各种布局效果。

二、代码实例

1.练习代码实例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位-绝对定位absolute</title><style type="text/css">.div1 {width: 100px;height: 100px;background-color: red;}.div2 {width: 100px;height: 100px;background-color: blue;position: absolute;left: 100px;/* 离本盒子最近的一个已经定位的祖先元素 最近&已经定位&祖先元素 默认为浏览器的左上角 */}.div3 {width: 100px;height: 100px;background-color: green;}.father {position: relative;}</style></head><body><div class="father"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body>
</html>

代码运行：

2.学校导航栏实例如下：

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="../css/cs4-6.css" /></head><body><div class="nvg"><ul><li><a href="#">学院概况</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">党政机构</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">院系设置</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">人才培养</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">师资队伍</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">教学资源</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">科学研究</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li><li><a href="#">招生就业</a><ul><li><a href="#">学院简介</a></li><li><a href="#">历史沿革</a></li><li><a href="#">现任领导</a></li><li><a href="#">学院漫游</a></li></ul></li></ul></div></body>
</html>

CSS

/* 导航栏的父盒子 */
* {padding: 0px;
}
.nvg {width: 1376px;height: 42px;/* border: 1px solid black; */margin: 10px auto;
}
/* 一级二级导航栏框架 */
.nvg ul {list-style-type: none;
}
/* 一级导航栏 */
/* .nvg>ul>li {list-style-type: none;
} */
.nvg>ul>li:hover ul{display: block;
}
/* 二级导航栏 */
.nvg>ul>li>ul {display: none;position: absolute;top: 42px;z-index: 999;
}
/* 每一个li */
.nvg ul li {width: 170px;height: 40px;background-color: #996600;border: 1px solid #CCCCCC;position: relative;float: left;
}
.nvg a:link,a:visited {text-decoration: none;font: 20px "times new roman";color: white;display: block;width: 170px;height: 40px;text-align: center;line-height: 40px;
}
.nvg a:hover {background-color: #492002;
}

代码运行如下：

当鼠标悬停在学校概况时（一级导航栏），出现下拉选项：

当鼠标悬停在人才培养时（一级导航栏），出现下拉选项：

总结

以上就是今天要讲的内容，本文简单记录了CSS- 4.3 绝对定位（position: absolute）以及学校导航栏实例，仅作为一份简单的笔记使用，大家根据注释理解

CSS- 4.3 绝对定位（position: absolute）学校官网导航栏实例

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 点…...

编程日记 2025/9/18 23:20:14

Flink 作业提交流程

Apache Flink 的作业提交流程（Job Submission Process） 是指从用户编写完 Flink 应用程序，到最终在 Flink 集群上运行并执行任务的整个过程。它涉及多个组件之间的交互，包括客户端、JobManager、TaskManager 和 ResourceManager。…...

编程日记 2025/8/10 16:06:00

拓展运算符

拓展运算符（Spread Operator）是ES6中引入的新特性，以下是关于它的一些知识点总结： 语法拓展运算符的语法是三个点（...），它可以将数组或对象展开成多个元素或属性。数组中的应用 • 数组展…...

编程日记 2025/8/9 15:51:29

Seata源码—6.Seata AT模式的数据源代理一

大纲 1.Seata的Resource资源接口源码 2.Seata数据源连接池代理的实现源码 3.Client向Server发起注册RM的源码 4.Client向Server注册RM时的交互源码 5.数据源连接代理与SQL句柄代理的初始化源码 6.Seata基于SQL句柄代理执行SQL的源码 7.执行SQL语句前取消自动提交事务的源…...

编程日记 2025/9/19 16:37:05

计算机科技笔记：容错计算机设计05 n模冗余系统 TMR 三模冗余系统

NMR（N-Modular Redundancy，N 模冗余）是一种通用的容错设计架构，通过引入 N 个冗余模块（N ≥ 3 且为奇数），并采用多数投票机制，来提升系统的容错能力与可靠性。单个模块如果可靠性小于…...

编程日记 2025/9/2 13:07:03

Spring Boot 与 RabbitMQ 的深度集成实践（一）

引言 ** 在当今的分布式系统架构中，随着业务复杂度的不断提升以及系统规模的持续扩张，如何实现系统组件之间高效、可靠的通信成为了关键问题。消息队列作为一种重要的中间件技术，应运而生并发挥着举足轻重的作用。消息队列的核心价值在于其…...

编程日记 2025/9/18 16:35:12

黑马程序员2024新版C++笔记第2章语句

1.if逻辑判断语句语法主体： if(要执行的判断，结果是bool型){判断结果是true会执行的代码; } 2.AI大模型辅助编程在Clion中搜索并安装对应插件： 右上角齿轮点击后找到插件(TRONGYI LINGMA和IFLYCODE)安装后重启ide即可。重启后会有通义登…...

编程日记 2025/9/2 12:45:24

HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理解析一、Microdata结构化数据核心属性 itemscope 声明数据范围itemtype 指定数据词汇表（如http://schema.org/Product）itemprop 定义数据属性 <div itemscope itemtype"http://schema.org/Book">…...

编程日记 2025/7/1 11:01:16

上位机知识篇---涂鸦智能云平台

文章目录前言前言本文简单介绍了涂鸦智能云平台。...

编程日记 2025/8/10 17:23:52

面试中的线程题

原文链接：线程题大全 Java 并发库同步辅助类 CountDownLatch 工作机制：初始化一个计数器，此计数器的值表示需要等待的事件数量。提供了两个主要方法： await()：当一个线程调用此方法时，它将阻塞&#…...

编程日记 2025/9/20 20:16:40

济南国网数字化培训班学习笔记-第三组-2-电力通信光缆网认知

电力通信光缆网认知光缆网架构现状基础底座电路系统是高度复杂，实时性、安全性、可靠性要求极高的巨系统，必须建设专用通信网相伴相生电力系统是由发电、输电、变电、配电、用电等一次设施，及保障其正常运行的保护、自动化、通信等…...

编程日记 2025/6/9 1:47:36

前端动画库 Anime.js 的V4 版本,兼容 Vue、React

前端动画库 Anime.js 更新了 V4 版本，并对其官网进行了全面更新，增加了许多令人惊艳的效果，尤其是时间轴动画效果，让开发者可以更精确地控制动画节奏。这一版本的发布不仅带来了全新的模块化 API 和显著的性能提升，还…...

编程日记 2025/9/2 13:06:53

用 PyTorch 从零实现简易GPT（Transformer 模型）

用 PyTorch 从零实现简易GPT（Transformer 模型） 本文将结合示例代码，通俗易懂地拆解大模型（Transformer）从数据预处理到推理预测的核心组件与流程，并通过 Mermaid 流程图直观展示整体架构。文章结构分为四…...

编程日记 2025/9/2 13:06:42

前端JSON序列化中的隐形杀手：精度丢失全解析与实战解决方案

当你在电商平台看到订单ID从 “1298035313029456899” 变成 “1298035313029456900”，或者在金融系统中发现账户余额 100.01 元变成了 100.00999999999999 元时，这很可能遭遇了前端开发中最隐蔽的陷阱之一 —— JSON序列化精度丢失。本文将深入解析这一问…...

编程日记 2025/7/4 21:17:39

【通用大模型】Serper API 详解：搜索引擎数据获取的核心工具

Serper API 详解：搜索引擎数据获取的核心工具一、Serper API 的定义与核心功能二、技术架构与核心优势2.1 技术实现原理2.2 对比传统方案的突破性优势三、典型应用场景与代码示例3.1 SEO 监控系统3.2 竞品广告分析四、使用成本与配额策略五、开发者注意事项六、替…...

编程日记 2025/9/16 18:50:15

Spring3+Vue3项目中的知识点——JWT

全称：JOSN Web Token 定义了一种简洁的、自包含的格式，用于通信双方以json数据格式的安全传输信息组成： 第一部分：Header（头），记录令牌类型、签名算法等。第二部分：Payload&am…...

编程日记 2025/9/2 13:06:32

python3GUI--智慧交通分析平台：By:PyQt5+YOLOv8（详细介绍）

文章目录一．前言二．效果预览1.目标识别与检测2.可视化展示1.车流量统计2. 目标类别占比3. 拥堵情况展示4.目标数量可视化 3.控制台4.核心内容区1.目标检测参数2.帧转QPixmap3.数据管理 5.项目结构三．总结平台规定gif最大5M，所以…...

编程日记 2025/9/18 12:59:47

Linux任务管理与守护进程

一、任务管理 （一）进程组、作业、会话概念 （1）进程组概念：进程组是由一个或多个进程组成的集合，这些进程在某些方面具有关联性。在操作系统中，进程组是用于对进程进行分组管理的一种机制。每个…...

编程日记 2025/9/20 3:25:17

C#里与嵌入式系统W5500网络通讯（2）

在嵌入式代码里，需要从嵌入式的MCU访问W5500芯片。这个是通过SPI通讯来实现的，所以要先连接SPI的硬件通讯线路。接着下来，就是怎么样访问这个芯片了。要访问这个芯片，需要通过SPI来发送数据，而发送数据又要有一定的约定格式，于是芯片厂商就定义下面的通讯格式： …...

编程日记 2025/9/5 18:24:48

EMQX开源版安装指南：Linux/Windows全攻略

EMQX开源版安装教程-linux/windows 因最近自己需要使用MQTT，需要搭建一个MQTT服务器，所以想到了很久以前用到的EMQX。但是当时的EMQX使用的是开源版的，在官网可以直接下载。而现在再次打开官网时发现怎么也找不大开源版本了，所以…...

编程日记 2025/9/5 18:24:06

【计算机视觉】OpenCV实战项目：GraspPicture 项目深度解析：基于图像分割的抓取点检测系统

GraspPicture 项目深度解析：基于图像分割的抓取点检测系统一、项目概述项目特点二、项目运行方式与执行步骤（一）环境准备（二）项目结构（三）执行步骤三、重要逻辑代码解析（一&#…...

编程日记 2025/9/20 10:06:18

MySQL 数据库备份与还原

作者：IvanCodes 日期：2025年5月18日专栏：MySQL教程思维导图备份 (Backup) 与冗余 (Redundancy) 的核心区别: 🎯 备份是指创建数据的副本并将其存储在不同位置或介质，主要目的是在发生数据丢失、损坏或逻辑错误时进…...

编程日记 2025/9/5 18:23:44

Kubernetes控制平面组件：Kubelet详解（四）：gRPC 与 CRI gRPC实现

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/9/14 11:09:39

javax.servlet.Filter 介绍-笔记

1.javax.servlet.Filter 简介 javax.servlet.Filter 是 Java Servlet API 中的一个核心接口，用于在请求到达目标资源（如 Servlet 或 JSP）之前或响应返回给客户端之前执行预处理或后处理操作。它常用于实现与业务逻辑无关的通用功能&#xff…...

编程日记 2025/9/5 18:23:02

从40秒到11毫秒：TiDB环境下一次SQL深潜优化实战

作者： meathill 原文来源： https://tidb.net/blog/edb6061b 在数据库应用中，慢SQL是常见的性能瓶颈。本文将详细记录一次针对TiDB Cloud v7.5.2环境中复杂评论查询的SQL优化过程，如何通过分析执行计划、添加索引、改写SQL&…...

编程日记 2025/6/11 2:37:27

Win 11开始菜单图标变成白色怎么办？

在使用windows 11的过程中，有时候开始菜单的某些程序图标变成白色的文件形式，但是程序可以正常打开，这个如何解决呢？ 这通常是由于快捷方式出了问题，下面跟着操作步骤来解决吧。 1、右键有问题的软件，打开…...

编程日记 2025/9/5 18:22:53

入门OpenTelemetry——应用自动埋点

埋点什么是埋点埋点，本质就是在你的应用程序里，在重要位置插入采集代码，比如： 收集请求开始和结束的时间收集数据库查询时间收集函数调用链路信息收集异常信息这些埋点数据（Trace、Metrics、Logs）被…...

编程日记 2025/9/18 14:21:21

C语言链表的操作

初学初学C语言时，对于链表节点的定义一般是这样的： typedef struct node {int data;struct node *next; } Node; 向链表中添加节点： void addNode(Node **head, int data) {Node *newNode (Node*)malloc(sizeof(Node));newNode->dat…...

编程日记 2025/9/5 18:22:36

芯片生态链深度解析（二）：基础设备篇——人类精密制造的“巅峰对决”

【开篇：设备——芯片工业的“剑与盾”】当ASML的EUV光刻机以每秒5万次激光脉冲在硅片上雕刻出0.13nm精度的电路（相当于在月球表面精准定位一枚二维码），当国产28nm光刻机在华虹产线实现“从0到1”的突破，这场精密制造…...

编程日记 2025/9/5 18:22:25

C语言指针深入详解（二）：const修饰指针、野指针、assert断言、指针的使用和传址调用

目录一、const修饰指针 （一）const修饰变量 （二）const 修饰指针变量二、野指针 （一）野指针成因 1、指针未初始化 2、指针越界访问 3、指针指向的空间释放 （二）如何规避野指…...

编程日记 2025/9/5 18:22:14

系列文章目录

前言

一、CSS 定位之绝对定位（absolute）详解

1、绝对定位（absolute）的基本概念

2、绝对定位的核心特性

1. 脱离文档流

2. 定位基准点

3. 定位属性

3、绝对定位的常见应用场景

1. 创建浮动元素

2. 创建下拉菜单

4. 创建固定宽高比的元素

4、绝对定位的注意事项

1. 父元素需设置定位

2. 层叠上下文

3. 响应式设计中的挑战

5、绝对定位与其他定位方式的比较

6、最佳实践建议

二、代码实例

1.练习代码实例如下：

2.学校导航栏实例如下：

总结

相关文章：