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

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

article 2025/9/20 10:54:25

本系列可作为前端学习系列的笔记，代码的运行环境是在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）& 咖啡售卖官网实例

系列文章目录

前言

一、固定定位（fixed）详解

1、固定定位（fixed）的基本概念

2、固定定位的核心特性

1. 相对于视口定位

2. 脱离文档流

3. 定位属性

3、固定定位的常见应用场景

1. 固定导航栏

2. 返回顶部按钮

3. 浮动广告或通知

4. 视频播放器控件

4、固定定位的注意事项

1. 层叠上下文

2. 移动设备上的行为

3. 键盘弹出影响

4. 内容重叠问题

5. 打印样式

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

6、最佳实践建议

二、代码实例

1.练习代码实例如下：

2.咖啡售卖官网代码实例如下：

总结

前言

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

一、固定定位（fixed）详解

1、固定定位（fixed）的基本概念

固定定位（position: fixed）是CSS中一种特殊的定位方式，它使元素相对于浏览器视口（viewport）进行定位，即使页面滚动，元素也会保持在视口的固定位置。固定定位元素会脱离正常的文档流，不占据原始文档空间。

2、固定定位的核心特性

1. 相对于视口定位

固定定位元素的位置始终相对于浏览器窗口，而不是文档或任何父元素
即使页面滚动，元素也会保持在屏幕上的相同位置

2. 脱离文档流

与绝对定位类似，固定定位元素不占据文档中的空间
其他元素会忽略它的存在，就好像它从文档中"消失"了一样

3. 定位属性

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

css

.fixed-element {position: fixed;top: 20px;right: 20px;width: 150px;background: rgba(0,0,0,0.7);color: white;padding: 10px;text-align: center;
}

3、固定定位的常见应用场景

1. 固定导航栏

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.fixed-nav {position: fixed;top: 0;left: 0;width: 100%;background: #333;color: white;padding: 15px 0;z-index: 1000;}.content {margin-top: 60px; /* 为固定导航栏留出空间 */padding: 20px;}</style></head><body><nav class="fixed-nav"><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav><div class="content"><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><h1>hhh </h1><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><h1>hhh </h1><!-- 大量内容... --></div></body>
</html>

css

.fixed-nav {position: fixed;top: 0;left: 0;width: 100%;background: #333;color: white;padding: 15px 0;z-index: 1000;
}
.content {margin-top: 60px; /* 为固定导航栏留出空间 */padding: 20px;
}

代码运行：导航栏固定在上方

2. 返回顶部按钮

html

<button class="back-to-top">↑ 返回顶部</button>

css

.back-to-top {position: fixed;bottom: 30px;right: 30px;padding: 10px 15px;background: #333;color: white;border: none;border-radius: 50%;cursor: pointer;opacity: 0;transition: opacity 0.3s;
}
.back-to-top.visible {opacity: 1;
}

（通常配合JavaScript在滚动一定距离后显示）

3. 浮动广告或通知

html

<div class="floating-ad"><p>限时优惠！立即购买！</p><button class="close-ad">×</button>
</div>

css

.floating-ad {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 90%;max-width: 500px;background: #f8d7da;color: #721c24;padding: 15px;border-radius: 5px 5px 0 0;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.close-ad {float: right;background: none;border: none;font-weight: bold;cursor: pointer;
}

4. 视频播放器控件

html

<div class="video-container"><video src="video.mp4" controls></video><div class="video-controls"><!-- 播放/暂停按钮、进度条等 --></div>
</div>

css

.video-controls {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.8);padding: 10px 20px;border-radius: 30px;display: flex;align-items: center;gap: 15px;
}

4、固定定位的注意事项

1. 层叠上下文

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

css

.fixed-header {position: fixed;top: 0;left: 0;width: 100%;z-index: 100; /* 确保在大多数内容之上 */background: white;
}

2. 移动设备上的行为

在iOS等移动设备上，固定定位元素在滚动时可能会有轻微抖动
某些移动浏览器可能会忽略fixed定位或表现不一致

3. 键盘弹出影响

在移动设备上，当键盘弹出时，固定定位元素的位置可能会受到影响

4. 内容重叠问题

固定定位元素可能会遮挡页面内容，需要为下方内容留出空间
示例：

css

body {padding-top: 60px; /* 为固定导航栏留出空间 */
}

5. 打印样式

固定定位元素在打印时可能不会按预期显示，需要特殊处理

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

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

6、最佳实践建议

考虑移动设备兼容性：在移动设备上测试固定定位元素的行为，特别是滚动和键盘弹出时
为下方内容留出空间：使用margin-top或padding-top为固定定位元素下方的页面内容留出空间，防止内容被遮挡
合理使用z-index：确保固定定位元素在正确的层叠顺序中，避免被其他元素遮挡
响应式设计：在小屏幕上可能需要调整固定定位元素的位置或完全隐藏它们
性能考虑：避免在固定定位元素上使用复杂的动画或效果，这可能会影响滚动性能
可访问性：确保固定定位元素不会干扰键盘导航或屏幕阅读器的使用

固定定位是创建现代网页布局中非常有用的工具，特别适合需要始终可见的元素。然而，由于其特殊的行为，使用时需要特别注意其对页面布局和用户体验的影响。

二、代码实例

1.练习代码实例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位-固定定位</title><style type="text/css">.fix {width: 100px;height: 100px;background-color: #996600;border-radius: 40px 40px;position: fixed;bottom: 0px;right: 0px;}.fix a:link,a:visited {color: white;text-decoration: none;display: block;width: 100px;height: 100px;text-align: center;line-height: 100px;}</style></head><body><div class="fix"><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></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" /><style type="text/css">.fix {width: 100px;height: 100px;background-color: #996600;border-radius: 40px 40px;position: fixed;bottom: 0px;right: 0px;}.fix a:link,a:visited {color: white;text-decoration: none;display: block;width: 100px;height: 100px;text-align: center;line-height: 100px;}.header {width: 900px;height: 220px;margin: 10px auto;}.showpic {width: 1100px;height: 230px;margin: 10px auto;}.container {width: 170px;height: 230px;/* border: 1px solid black; */position: relative;float: left;margin-right: 50px;}.container .coffee:link,.coffee:visited {text-decoration: none;color: #996600;}.container .tag {position: absolute;bottom: 1px;left: 40px;/* display: block;width: 170px;height: 35px;text-align: center; */}.container a:hover {opacity: 0.7;}</style></head><body><div class="header"><img src="../img/coffee.jpg"></div><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><div class="showpic"><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">阿拉比卡</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">罗布斯塔</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">利比里卡</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">埃克塞尔莎</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">‌蓝山</span></a></div></div><div class="showpic"><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">格拉纳达</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">铁皮卡</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">波旁</span></a></div><div class="container" class="coffee"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">瑰夏</span></a></div><div class="container"><a href="#" class="coffee"><img src="../img/kbjn.jpg"><span class="tag">耶加雪菲</span></a></div></div><div class="fix"></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;
}

代码运行如下:

当鼠标悬停在图片上时，清晰度变化：

正常状态：链接保持完全不透明（opacity: 1）
悬停状态：当鼠标移动到链接上时，不透明度变为0.7，产生淡出效果
鼠标移出：当鼠标移开时，不透明度恢复为1

.container a:hover {opacity: 0.7;
}

总结

以上就是今天要讲的内容，本文简单记录了固定定位（fixed）以及咖啡售卖官网，仅作为一份简单的笔记使用，大家根据注释理解

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

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

编程日记 2025/9/5 11:59:07

得力标签打印机系统集成方案的技术应用与场景实践

一、方案背景与技术特性在物联网设备管理场景中，标签打印的自动化与效率提升成为企业数字化升级的重要需求。得力标签打印机驱动及系统集成方案，通过技术接口开发与硬件协同，为设备标识管理提供轻量化对接能力。以下从技术适配性与功能设计…...

编程日记 2025/9/5 11:58:07

【通用智能体】Playwright：跨浏览器自动化工具

Playwright：跨浏览器自动化工具一、Playwright 是什么？二、应用场景及案例场景 1：端到端（E2E）测试场景 2：UI 自动化（表单批量提交）场景 3：页面截图与 PDF 生成场景 4&am…...

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

SmartETL函数式组件的设计与应用

SmartETL框架主要采用了面向对象的设计思想，将ETL过程中的处理逻辑抽象为Loader和Processor（对应loader模块和iterator模块），所有流程组件需要继承或实现DataProvider（iter方法）或JsonIterator（…...

编程日记 2025/9/19 6:26:59

精准掌控张力动态，重构卷对卷工艺设计

一、MapleSim Web Handling Library仿真和虚拟调试解决方案在柔性材料加工领域，卷对卷（Roll-to-Roll）工艺的效率与质量直接决定了产品竞争力。如何在高动态生产场景中实现张力稳定、减少断裂风险、优化加工速度，是行业长期面临的…...

编程日记 2025/9/17 20:51:58

LlamaIndex中应用自定义提示词提升回答质量

在 LlamaIndex 中，get_response_synthesizer 允许你自定义生成回答的方式，包括传入自定义提示词（prompt）。可以通过 response_mode 和 text_qa_template 等参数来控制回答的生逻辑。在 LlamaIndex 中优化提示词（Prompt Template）可以显著提升回答质量。一、使用自定义提…...

编程日记 2025/7/16 17:45:16

永磁同步电机公式总结【一】——反电动势、磁链、转矩公式；三项、两项电压方程；坐标表换方程

一、PMSM 电机参数介绍 1.1 转子极数转子极数 (Rotor Poles) ：三相交流电机每组线圈都会产生 N、S 磁极，每个电机每相含有的永磁体磁极个数就是极数。由于磁极是成对出现的，所以电机有 2、4、6、8……极 (偶数)。未知参数的电机&#xff…...

编程日记 2025/9/19 12:11:26

STL - stack 和 queue 及容器适配器模式的介绍

文章目录 1. stack 的介绍和使用1.1 stack 的介绍1.2 stack 的接口及使用1.3 stack 的模拟实现 2. queue 的介绍和使用2.1 queue 的介绍2.2 queue 的接口及使用2.3 queue 的模拟实现 3. priority_queue的介绍和使用3.1 priority_queue 的介绍3.2 priority_queue 的接口及使用3.…...

编程日记 2025/9/18 8:07:11

windows 安装gdal实现png转tif，以及栅格拼接

windows 安装gdal实现png转tif，以及栅格拼接一、安装gdal 网上有很多安装gdal的方法，此处通过osgeo4w安装gdal 1.下载osgeo4w 下载地址 https://trac.osgeo.org/osgeo4w/ 2、安装osgeo4w exe文件安装，前面部分很简单，就不再…...

编程日记 2025/9/5 14:15:48

量子计算在金融科技中的应用前景

随着量子计算技术的飞速发展，其在各行业的应用潜力逐渐显现，金融科技领域更是备受关注。量子计算的强大计算能力有望为金融行业带来前所未有的变革，从风险评估到投资组合优化，从高频交易到加密技术，量子计算都可能成为…...

编程日记 2025/9/19 14:30:31

OpenAI Chat API 详解：打造智能对话应用的基石

目录 OpenAI Chat API 详解：打造智能对话应用的基石参数概览核心参数详解与实战1. model: 选择你的 AI 大脑2. prompt: 指引 AI 的灵魂3. max_tokens: 控制输出的长度4. temperature 和 top_p: 调控创造力5. stop: 控制生成的结束6. presence_penalty 和 frequency_…...

编程日记 2025/9/17 20:01:08

JavaScript性能优化实战（12）：大型应用性能优化实战案例

在前面的系列文章中，我们探讨了各种JavaScript性能优化技术和策略。本篇将聚焦于实际的大型应用场景，通过真实案例展示如何综合运用这些技术，解决复杂应用中的性能挑战。目录电商平台首屏加载优化全流程复杂数据可视化应用性能优化案例在线协作工具的实时响应优化移动端W…...

编程日记 2025/9/18 11:52:57

Socket.IO是什么？适用哪些场景？

Socket.IO 详细介绍及适用场景一、Socket.IO 是什么？ Socket.IO 是一个基于事件驱动的实时通信库，支持双向、低延迟的客户端-服务器交互。它底层结合了 WebSocket 和 HTTP 长轮询等技术，能够在不同网络环境下自动选择最优传输方式&#x…...

编程日记 2025/9/11 22:50:52

深度学习入门：卷积神经网络

目录 1、整体结构2、卷积层2.1 全连接层存在的问题2.2 卷积运算2.3 填充2.4 步幅2.5 3维数据的卷积运算2.6 结合方块思考2.7 批处理 3、池化层4、卷积层和池化层的实现4.1 4维数组4.2 基于im2col的展开4.3 卷积层的实现4.4 池化层的实现 5、CNN的实现6、CNN的可视化6.1 第一层权…...

编程日记 2025/9/18 0:07:41

【Odoo】Pycharm导入运行Odoo15

【Odoo】Pycharm导入运行Odoo15 前置准备1. Odoo-15项目下载解压2. PsrtgreSQL数据库项目导入运行1. 项目导入2. 设置项目内虚拟环境3. 下载项目中依赖4. 修改配置文件odoo.conf 运行Pycharm快捷运行前置准备 1. Odoo-15项目下载解压将下载好的项目解压到开发目录下 2. …...

编程日记 2025/9/7 2:01:29

pytest框架 - 第二集 allure报告

一、断言assert 二、Pytest 结合 allure-pytest 插件生成美观的 Allure 报告 (1) 安装 allure 环境安装 allure-pytest 插件：pip install allure-pytest在 github 下载 allure 报告文件地址：Releases allure-framework/allure2 GitHub下载&#x…...

编程日记 2025/9/9 7:15:41

pycharm连接github（详细步骤）

【前提：菜鸟学习的记录过程，如果有不足之处，还请各位大佬大神们指教（感谢）】 1.先安装git 没有安装git的小伙伴，看上一篇安装git的文章。安装git，2.49.0版本-CSDN博客打开cmd（…...

编程日记 2025/9/7 5:20:09

Android日活（DAU）检测的四大实现方案详解

引言日活跃用户（DAU）是衡量应用健康度的核心指标之一。在Android开发中，实现DAU统计需要兼顾准确性、性能和隐私合规。本文将详细介绍四种主流实现方案，并提供完整的代码示例和选型建议。方案一：本地检测方案核心…...

编程日记 2025/9/19 18:23:12

2021ICPC四川省赛个人补题ABDHKLM

Dashboard - The 2021 Sichuan Provincial Collegiate Programming Contest - Codeforces 过题难度： A K D M H B L 铜奖 5 594 银奖 6 368 金奖 8 755 codeforces.com/gym/103117/problem/A 模拟出牌的过程，打表即可 // Code Start Here int t…...

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

oracle linux 95 升级openssh 10 和openssl 3.5 过程记录

1. 安装操作系统，注意如果可以选择，选择安装开发工具，主要是后续需要编译安装，需要gcc 编译工具。 2. 安装操作系统后，检查zlib 、zlib-dev是否安装，如果没有，可以使用安装镜像做本地源安装&a…...

编程日记 2025/9/20 4:33:10

httpx[http2] 和 httpx 的核心区别及使用场景如下

httpx[http2] 和 httpx 的核心区别在于 HTTP/2 协议支持，具体差异及使用场景如下： 1. 功能区别命令/安装方式协议支持额外依赖适用场景pip install httpx仅 HTTP/1.1无通用请求，轻量依赖pip install httpx[http2]支持 HTTP/2需安装 h2>3…...

编程日记 2025/7/29 19:53:38