固定定位案例

最新推荐文章于 2025-12-03 13:04:04 发布
原创 最新推荐文章于 2025-12-03 13:04:04 发布 · 451 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

本文主要介绍了如何使用HTML和CSS中的position属性实现元素的固定定位，使元素相对于浏览器可视窗口保持固定位置，不受滚动条影响。

<!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>

        .wz {

            position: fixed;

            top: 100px;

            left: 170px;

        }

    </style>

</head>

<body>

    <div class="wz">

        <img src="images/pvp.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>

    <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>

    <!-- 固定定位特点：

    1.以浏览器的可视窗口为参照点移动元素

    2.跟父级元素没有任何关系 -->

    <!-- 3.不随滚动条滚动

    4.固定位置不占有原先的位置 -->

</body>

</html>

程序猫..
关注
CSS固定定位与粘性定位4大企业级案例
艾编程带你学前端博客
12-11 791
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。属性值描述relative 相对定位相对于自身正常位置进行位置的调整absolute 绝对定位相对于其最近的定位的父元素进行位置调整。fixed 固定定位相对于浏览器窗口进行位置调整sticky 粘性定位是基于用户的滚动位置来定位。固定定位相对于浏览器窗口进行定位，其它与绝对定位的特性一致。
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 1008
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
css中的固定定位例子超详细！！！
fighting_dream的博客
01-25 1088
固定定位是什么呢？ 固定定位是元素固定于浏览器可视区的位置。主要作用是可以在浏览器页面滚动时元素的位置也不会改变。 语法： { position:fixed; } 例子举起来~ 还没加固定定位的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
html定位属性及应用案例
qq_50748038的博客
08-04 2994
html定位属性，返回顶部和导航栏悬浮设置
h5的相对定位、绝对定位、固定定位以及案例练习
热门推荐
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
CSS定位详解及案例
小洋人最happy的专栏
07-05 2494
文章目录一、标准流1.1 概念1.2 不足二、定位2.1 概念2.2 static-静态定位2.3 relative-相对定位2.3.1 特点：2.3.2 示例一2.3.3 示例二2.4 fixed-固定定位2.4.2 特点2.4.2 示例2.5 absolute-固定定位2.5.1 特点2.5.2 子绝父相2.5.3 示例一2.5.4 示例二2.6 层叠关系2.6.1 元素层叠2.6.2 z-index特点：2.6.3 比较原则2.6.3.1 兄弟关系2.6.3.2 如果不是兄弟关系三、小结3.1 对照表
CSS定位
2301_80761370的博客
04-13 954
让盒子从普通流中起来 ——。将盒子在某一个置 自由的漂浮在其他盒子的上面。
固定定位、浮动、绝对定位
LW3034987的博客
06-28 263
css和html
固定到版心案例
h131425q的博客
04-16 598
*1002/2 版心的一半 + 120px 盒子自己的宽度 + 10px的缝隙*/-- 左右的固定定位 -->
CSS基础学习之定位---流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
sinat_38505686的博客
05-04 1063
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 流定位 浮动定位 相对定位 绝对定位 固定定位 流定位 页面中的块级元素框从上到下一个接一个地排列 每一个块级元素都会出现在一个新行中（比如p元素、div元素） 元素框之间的垂直距离是由框的...
固定定位和粘性定位还有锚点案例
11-20
固定定位和粘性定位还有锚点用法案例
视觉定位案例，包括定位轮廓中点、车牌识别与定位、二维码检测与定位、和条形码定位
04-14
### 视觉定位案例分析 #### 一、概述 本文将详细介绍四个视觉定位案例：定位轮廓中点、车牌识别与定位、二维码检测与定位、以及条形码定位。这些案例涵盖了机器视觉领域的关键技术，旨在通过具体的应用场景展示...
CSS元素的浮动与定位综合案例3.pdf
07-10
2. **定位（Positioning）**：包括相对定位、绝对定位和固定定位，可以精确控制元素的位置，其中相对定位是基于元素本身的位置，而绝对定位则基于最近的非静态定位祖先元素。 3. **背景图像（Background Image）**：...
Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
祈澈菇凉
12-02 541
✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 597
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 443
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
【免费云平台部署指南】按场景选型+全维度对比（附直达地址）
最新发布
分享技术干货，聚焦AI前沿科技
12-03 554
免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。
js考古之seajs.use、layui.use是啥 以及来源？
weixin_52236586的博客
11-29 495
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
医院随访管理系统源码 患者随访管理系统源码 智能随访系统源码 出院随访系统源码，基于Java+Vue前后端分离架构
爱笑的源码博客
11-29 411
摘要：医院随访管理系统是一款基于Java+Vue前后端分离架构开发的智能平台，集成了患者信息管理、随访计划设定、自动提醒等功能。系统支持个性化随访计划制定（按病种/药品/患者分类）、内置丰富的随访知识库和问卷模板，提供本地电话接入和录音功能。通过自动推送提醒、多形式随访记录、审核管理和数据分析等功能，有效提升诊后随访效率和质量，为临床治疗优化和药品疗效评估提供数据支持。系统采用Springboot+MySQL技术栈，实现医院随访工作的规范化、智能化管理。
绝对定位和固定定位的区别
04-10
<think>好的，我现在需要回答用户关于CSS中绝对定位和固定定位的区别及使用场景的问题。首先，我需要回顾一下相关的知识点，确保自己理解正确。 根据用户提供的引用资料，绝对定位（absolute）和固定定位（fixed）都是通过position属性设置的。绝对定位的元素会相对于最近的已定位祖先元素进行定位，如果没有这样的祖先，则相对于文档的初始包含块，通常是视口。而固定定位则是相对于浏览器窗口，即使页面滚动，元素的位置也不会改变。 接下来，我需要整理两者的主要区别。首先是定位的参照物不同：绝对定位相对于最近的已定位祖先，固定定位相对于视口。其次是滚动时的表现，固定定位元素不会随页面滚动而移动，而绝对定位元素会随着祖先元素的滚动而移动。还有空间占用方面，绝对定位元素脱离文档流，不再占据空间，但固定定位同样脱离文档流，但位置固定。 使用场景方面，绝对定位适合需要精确控制位置的情况，比如对话框、菜单等相对于某个父元素定位。固定定位适合导航栏、侧边栏或悬浮按钮，需要固定在视口的某个位置。 需要注意的是，用户提供的引用中有提到绝对定位如果没有已定位的祖先，会相对于文档流，而固定定位直接相对于视口。此外，引用4还提到了粘性定位，但用户的问题不涉及这个，可以暂时忽略。 在回答时要结构清晰，分点列出区别和使用场景，并引用提供的资料作为支持。同时，要确保LaTeX格式正确，但这个问题可能不涉及数学公式，所以可能不需要使用。不过用户可能有其他问题需要，但根据当前问题，可能不需要数学表达式。不过根据系统级指令，行内数学表达式需要用$...$，但这里可能用不到，暂时忽略。 最后，要生成相关问题，可能涉及其他定位方式如相对定位、粘性定位，或者具体应用案例，比如如何实现固定导航栏等。 总结回答的结构： 1. 区别：定位参照物、滚动表现、空间占用、应用场景 2. 使用场景分别举例 3. 引用资料中的示例代码或说明来支持 4. 相关问题生成 需要检查是否有遗漏点，比如绝对定位的祖先元素是否需要设置position为非static，是的，已定位祖先通常指position为relative、absolute、fixed或sticky的元素。这一点在引用中提到过，比如引用3中的示例说明绝对定位相对于最近的已定位祖先，如果不存在则相对于文档。 确认无误后，组织语言，使用中文回答，分点明确，自然引用标注。</think>### CSS中绝对定位与固定定位的区别及使用场景 #### 一、核心区别 1. **定位参照物** - **绝对定位**（`position: absolute`）：相对于**最近的已定位祖先元素**（即设置了 `position: relative/absolute/fixed/sticky` 的父元素）。若没有已定位祖先，则相对于文档的初始包含块（通常是视口）[^3]。 - **固定定位**（`position: fixed`）：直接相对于**浏览器视口**，与父元素无关[^2][^3]。 2. **滚动表现** - 绝对定位元素会**随祖先元素滚动而移动**（若祖先元素可滚动）。 - 固定定位元素**始终固定在视口指定位置**，页面滚动时位置不变[^3][^4]。 3. **空间占用** - 两者均脱离文档流，**不占据原有空间**，但固定定位的位置完全独立于页面布局[^3]。 --- #### 二、使用场景 1. **绝对定位的典型应用** - **精准控制位置**：如对话框、下拉菜单、图标叠加等需要相对于父容器定位的场景。 - **脱离文档流的交互元素**：例如悬浮提示框（需父元素设置 `position: relative` 作为参考点）[^4]。 ```css .parent { position: relative; /* 作为绝对定位的参考点 */ } .child { position: absolute; top: 10px; left: 20px; } ``` 2. **固定定位的典型应用** - **全局固定元素**：如导航栏、侧边栏、“返回顶部”按钮、广告横幅等需要始终可见的组件。 - **独立于页面滚动的元素**：例如页脚联系方式（固定在视口底部）[^2][^4]。 ```css .navbar { position: fixed; top: 0; left: 0; width: 100%; } ``` --- #### 三、注意事项 - **绝对定位依赖父级定位**：若未设置参考父元素，可能意外相对于视口定位，导致布局错乱。 - **固定定位的性能**：过度使用可能影响页面滚动性能，尤其在移动端[^4]。 - **响应式适配**：固定定位需考虑不同屏幕尺寸的适配问题（如使用 `right: 10px` 而非固定宽度）。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值