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

HTML5 定位详解：相对定位、绝对定位和固定定位

article 2025/9/25 18:26:11
  在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制。主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。下面我将详细讲解这三种非静态定位方式，并提供相应的源代码示例。

1. 相对定位 (Relative Positioning)

特点：

  • 元素相对于其正常位置进行偏移

  • 不会脱离文档流，原来的空间仍然保留

  • 使用 top、right、bottom、left 属性进行定位

  • 常用于微调元素位置或作为绝对定位元素的参照

  • <!DOCTYPE html>
<html>
<head>
<style>
.relative-box {position: relative;left: 50px;top: 20px;width: 200px;height: 100px;background-color: lightblue;border: 2px solid blue;
}
</style>
</head>
<body>
<h2>相对定位示例</h2>
<p>这是一个普通段落。</p>
<div class="relative-box">这个div使用了相对定位，向右移动50px，向下移动20px。</div>
<p>注意相对定位元素原来的空间仍然保留。</p>
</body>
</html>

    2. 绝对定位 (Absolute Positioning)

    特点：

  • 元素相对于最近的已定位祖先元素(非static)进行定位

  • 如果没有已定位祖先，则相对于初始包含块(通常是html元素)

  • 完全脱离文档流，不占据空间

  • 使用 top、right、bottom、left 属性进行精确定位

  • 常用于创建浮动元素、对话框等

    <!DOCTYPE html>
<html>
<head>
<style>
.container {position: relative;width: 400px;height: 200px;background-color: #f0f0f0;border: 2px solid gray;
}.absolute-box {position: absolute;right: 20px;bottom: 10px;width: 150px;height: 80px;background-color: lightcoral;border: 2px solid red;
}
</style>
</head>
<body>
<h2>绝对定位示例</h2>
<div class="container">这是一个相对定位的容器<div class="absolute-box">这个div使用了绝对定位，相对于容器定位在右下角。</div>
</div>
</body>
</html>

    3. 固定定位 (Fixed Positioning)

    特点：

  • 元素相对于浏览器窗口进行定位

  • 不随页面滚动而移动

  • 完全脱离文档流

  • 常用于导航栏、返回顶部按钮等需要固定在屏幕某处的元素

    <!DOCTYPE html>
<html>
<head>
<style>
.fixed-box {position: fixed;right: 20px;bottom: 20px;width: 100px;height: 50px;background-color: lightgreen;border: 2px solid green;text-align: center;line-height: 50px;
}
</style>
</head>
<body>
<h2>固定定位示例</h2>
<p>向下滚动页面，右下角的按钮会固定在相同位置。</p>
<div style="height: 2000px;">很多内容...</div>
<div class="fixed-box">固定按钮</div>
</body>
</html>

    三种定位方式的主要区别

    特性相对定位 (relative)绝对定位 (absolute)固定定位 (fixed)
    参照物自身原始位置最近的已定位祖先浏览器窗口
    文档流保留原空间脱离文档流脱离文档流
    滚动影响随页面滚动随祖先元素滚动不随页面滚动
    常见用途微调元素位置、作为定位上下文弹出层、浮动元素导航栏、固定按钮
    z-index可应用可应用可应用
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: Arial, sans-serif;margin: 0;padding: 20px;
}.container {position: relative;width: 80%;height: 300px;margin: 30px auto;background-color: #f5f5f5;border: 2px dashed #333;padding: 20px;
}.relative-box {position: relative;left: 50px;top: 20px;width: 200px;height: 100px;background-color: rgba(173, 216, 230, 0.7);border: 2px solid blue;
}.absolute-box {position: absolute;right: 30px;top: 50px;width: 150px;height: 80px;background-color: rgba(240, 128, 128, 0.7);border: 2px solid red;
}.fixed-box {position: fixed;left: 20px;top: 20px;width: 120px;height: 60px;background-color: rgba(144, 238, 144, 0.7);border: 2px solid green;text-align: center;line-height: 60px;
}.sticky-box {position: sticky;top: 10px;width: 100%;height: 50px;background-color: rgba(255, 255, 0, 0.7);border: 2px solid orange;text-align: center;line-height: 50px;margin-top: 20px;
}.long-content {height: 1500px;margin-top: 30px;padding: 20px;background-color: #eee;
}
</style>
</head>
<body>
<div class="fixed-box">固定定位</div><h1>CSS定位方式演示</h1><div class="sticky-box">粘性定位(Sticky)</div><div class="container"><div class="relative-box">相对定位</div><div class="absolute-box">绝对定位</div><p>这是一个相对定位的容器，包含相对定位和绝对定位的元素。</p>
</div><div class="long-content"><p>向下滚动页面，观察不同定位元素的行为...</p><p>固定定位元素始终在窗口固定位置。</p><p>粘性定位元素在到达指定位置时会粘住。</p>
</div>
</body>
</html>

相关文章：

HTML5 定位详解：相对定位、绝对定位和固定定位

在HTML5和CSS中&#xff0c;定位(positioning)是控制元素在页面上位置的重要机制。主要有四种定位方式&#xff1a;静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。下面我将详细讲解这三种非静态定位方式&#xff0c;并提供相应的源代码示例。 …...

编程日记 2025/9/19 15:36:16

OpenCv高阶（4.0）——案例：海报的透视变换

文章目录 前言一、工具函数模块1.1 图像显示函数1.2 保持宽高比的缩放函数1.3 坐标点排序函数 二、透视变换核心模块2.1 四点透视变换实现 三、主流程技术分解3.1 图像预处理3.2 轮廓检测流程3.3 最大轮廓处理 四、后处理技术4.1 透视变换4.2 形态学处理 五、完整代码总结 前言…...

编程日记 2025/9/24 18:59:00

光谱相机的图像预处理技术

光谱相机的图像预处理技术旨在消除噪声、增强有效信息&#xff0c;为后续分析提供高质量数据。 一、预处理流程与技术要点 ‌辐射校正‌ ‌辐射定标‌&#xff1a;将图像灰度值转换为绝对辐射亮度&#xff0c;常用反射率法、辐亮度法和辐照度法消除传感器响应差异&#xff0…...

编程日记 2025/9/24 18:59:55

CSS 溢出内容处理、可见性控制与盒类型设置深度解析

CSS溢出内容处理、可见性控制与盒类型设置深度解析 一、溢出内容处理&#xff08;Overflow&#xff09; 在网页设计中&#xff0c;内容超出容器边界是常见问题。CSS提供了overflow属性及其变体来控制这种情况。 1.1 溢出基本属性 核心属性&#xff1a; overflow: visible&…...

编程日记 2025/9/21 11:18:37

k8s监控方案实践补充（一）：部署Metrics Server实现kubectl top和HPA支持

k8s监控方案实践补充&#xff08;一&#xff09;&#xff1a;部署Metrics Server实现kubectl top和HPA支持 文章目录 k8s监控方案实践补充&#xff08;一&#xff09;&#xff1a;部署Metrics Server实现kubectl top和HPA支持一、Metrics Server简介二、Metrics Server实战部署…...

编程日记 2025/9/24 19:02:27

从代码学习深度学习 - 实战 Kaggle 比赛：图像分类 (CIFAR-10 PyTorch版)

文章目录 前言1. 读取并整理数据集1.1 读取标签文件1.2 划分训练集和验证集1.3 整理测试集1.4 执行数据整理2. 图像增广2.1 训练集图像变换2.2 测试集（和验证集）图像变换3. 读取数据集3.1 创建 Dataset 对象3.2 创建 DataLoader 对象4. 定义模型4.1 获取 ResNet-18 模型4.2 损…...

编程日记 2025/9/21 2:36:33

【数据结构】二分查找5.12

Basic 需求&#xff1a;在有序数组A内&#xff0c;查找值target 如果找到返回索引 如果找不到返回-1 算法描述&#xff1a; 前提&#xff1a;给定一个内含n个元素的有序数组A&#xff08;升序&#xff09;&#xff0c;一个待查找值 设置两个索引&#xff1a;i0;jn-1; 如果…...

编程日记 2025/9/24 17:36:25

深入探索向量数据库：构建智能应用的新基础

&#x1f4cc; 友情提示&#xff1a; 本文内容由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;创作平台的gpt-4-turbo模型辅助生成&#xff0c;旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证&#xff0c;建议读者通过官方文档或实践进一步确认…...

编程日记 2025/9/20 21:03:26

Swagger go中文版本手册

Swaggo（github.com/swaggo/swag）的注解语法是基于 OpenAPI 2.0 (以前称为 Swagger 2.0) 规范的，并添加了一些自己的约定。 主要官方文档： swaggo/swag GitHub 仓库: 这是最权威的来源。 链接: https://github.com/swaggo/swag重点关注: README.md: 包含了基本的安装、使用…...

编程日记 2025/8/4 18:08:19

Cloudera CDP 7.1.3 主机异常关机导致元数据丢失，node不能与CM通信

问题描述 plaintext ERROR Could not load post-deployment data from /var/run/cloudera-scm-agent/process/ccdeploy_hadoop-conf_etchadoopconf.cloudera.yarn_-8903374259073700469 IOError: [Errno 2] No such file or directory: /var/run/cloudera-scm-agent/proce…...

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

Redis特性与应用

1、分布式缓存与redis 2、redis数据结构和客户端集成 3、缓存读写模式与数据一致性 本地缓存&#xff1a;Hash Map、Ehcache、Caffeine、Google Guava 分布式缓存&#xff1a;Memcached、redis、Hazelcast、Apache ignite redis&#xff1a;基于键值对内存数据库&#xff0c;支…...

编程日记 2025/9/22 15:19:18

嵌入式调试新宠！J-Scope：免费+实时数据可视化，让MCU调试效率飙升！

&#x1f4cc; 痛点直击&#xff1a;调试还在用“断点打印”&#xff1f; 嵌入式开发中&#xff0c;你是否也经历过这些崩溃瞬间&#xff1f; 想实时观察变量变化&#xff0c;代码里插满printf&#xff0c;结果拖垮系统性能&#xff1f; 断点调试打断程序运行&#xff0c;时序…...

编程日记 2025/9/24 18:34:10

微信小程序学习之搜索框

1、第一步&#xff0c;我们在index.json中引入vant中的搜索框控件&#xff1a; {"usingComponents": {"van-search": "vant/weapp/search/index"} } 2、第二步&#xff0c;直接在index.wxml中添加布局&#xff1a; <view class"index…...

编程日记 2025/9/23 20:26:22

Altium Designer AD如何输出PIN带网络名的PDF装配图

Altium Designer AD如何输出PIN带网络名的PDF装配图 文描述在Altium Designer版本中设置焊盘网络名时遇到的问题&#xff0c;网络名大小不一致&#xff0c;部分PAD的网络名称未显示&#xff0c;可能涉及字符大小设置和版本差异。 参考 1.AD导出PCB装配图 https://blog.csd…...

编程日记 2025/9/24 19:00:39

VMware虚拟机 安装 CentOS 7

原文链接: VMware虚拟机 安装 CentOS 7 安装准备 软件: VMware Workstation Pro 17.6.3 镜像: CentOS-7.0-1406-x86_64-DVD.iso 我打包好放这了&#xff0c;VMware 和 CentOS7 &#xff0c;下载即可。 关于VMware Workstation Pro 17.6.3&#xff0c;傻瓜式安装即可。 CentO…...

编程日记 2025/9/24 18:58:09

关于高并发GIS数据处理的一点经验分享

1、背景介绍 笔者过去几年在参与某个大型央企的项目开发过程中，遇到了十分棘手的难题。其与我们平常接触的项目性质完全不同。在一般的项目中，客户一般只要求我们能够通过桌面软件对原始数据进行加工处理，将各类地理信息数据加工处理成地图/场景和工作空间，然后再将工作空…...

编程日记 2025/7/13 19:15:30

Python训练打卡Day22

复习日&#xff1a; 1.标准化数据&#xff08;聚类前通常需要标准化&#xff09; scaler StandardScaler() X_scaled scaler.fit_transform(X) StandardScaler() &#xff1a;这部分代码调用了 StandardScaler 类的构造函数。在Python中&#xff0c;当你在类名后面加上括号…...

编程日记 2025/9/24 18:34:23

Cold Diffusion: Inverting Arbitrary Image Transforms Without Noise论文阅读

冷扩散&#xff1a;无需噪声的任意图像变换反转 摘要 标准扩散模型通常涉及两个核心步骤&#xff1a;图像降质 &#xff08;添加高斯噪声&#xff09;和图像恢复 &#xff08;去噪操作&#xff09;。本文发现&#xff0c;扩散模型的生成能力并不强烈依赖于噪声的选择&#xf…...

编程日记 2025/9/24 18:57:21

2025认证杯数学建模第二阶段C题：化工厂生产流程的预测和控制，思路+模型+代码

2025认证杯数学建模第二阶段思路模型代码&#xff0c;详细内容见文末名片 一、探秘化工世界&#xff1a;问题背景大揭秘 在 2025 年 “认证杯”数学中国数学建模网络挑战赛第二阶段 C 题中&#xff0c;我们一头扎进了神秘又复杂的化工厂生产流程预测与控制领域。想象一下&…...

编程日记 2025/9/24 7:11:53

物联网驱动的共享充电站系统：智能充电的实现原理与技术解析！

随着新能源汽车的快速普及&#xff0c;共享充电站系统作为其核心基础设施&#xff0c;正通过物联网技术的深度赋能&#xff0c;实现从“传统充电”到“智能充电”的跨越式升级。本文将从系统架构、核心技术、优化策略及实际案例等角度&#xff0c;解析物联网如何驱动共享充电站…...

编程日记 2025/9/19 1:42:09

嵌软面试每日一阅----通信协议篇(二)之TCP

一. TCP和UDP的区别 可靠性 TCP&#xff1a;✅ 可靠传输&#xff08;三次握手 重传机制&#xff09; UDP&#xff1a;❌ 不可靠&#xff08;可能丢包&#xff09; 连接方式 TCP&#xff1a;面向连接&#xff08;需建立/断开连接&#xff09; UDP&#xff1a;无连接&#xff0…...

编程日记 2025/9/24 18:52:24

机器学习 --- 模型选择与调优

机器学习 — 模型选择与调优 文章目录 机器学习 --- 模型选择与调优一&#xff0c;交叉验证1.1 保留交叉验证HoldOut1.2 K-折交叉验证(K-fold)1.3 分层k-折交叉验证Stratified k-fold 二&#xff0c;超参数搜索三&#xff0c;鸢尾花数据集示例四&#xff0c;现实世界数据集示例…...

编程日记 2025/9/24 18:33:59

《Python星球日记》 第58天：Transformer 与 BERT

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 一、引言一、Transformer 架构简介1. 自注意力机制（Self-Attention）工作原理2. 多头注意力与位置编码多头注意力机制位置编码二、BERT 的结构…...

编程日记 2025/9/19 8:35:21

2900. 最长相邻不相等子序列 I

2900. 最长相邻不相等子序列 I class Solution:def getLongestSubsequence(self, words: List[str], groups: List[int]) -> List[str]:n len(groups) # 获取 groups 列表的长度ans [] # 初始化一个空列表&#xff0c;用于存储结果for i, g in enumerate(groups): # 遍…...

编程日记 2025/9/25 0:46:30

AGI大模型（15）：向量检索之调用ollama向量数据库

这里介绍将向量模型下载到本地，这里使用ollama，现在本地安装ollama，这里就不过多结束了。直接从下载开始。 1 下载模型 首先搜索模型，这里使用bge-large模型，你可以根据自己的需要修改。 点击进入，复制命令到命令行工具中执行。 安装后查看： 2 代码实现 先下载ollama…...

编程日记 2025/9/24 18:34:08

Python网络请求利器：urllib库深度解析

一、urllib库概述 urllib是Python内置的HTTP请求库&#xff0c;无需额外安装即可使用。它由四个核心模块构成&#xff1a; ​​urllib.request​​&#xff1a;发起HTTP请求的核心模块​​urllib.error​​&#xff1a;处理请求异常&#xff08;如404、超时等&#xff09;​​…...

编程日记 2025/9/25 6:52:24

什么是Agentic AI（代理型人工智能）？

什么是Agentic AI&#xff08;代理型人工智能&#xff09;&#xff1f; 一、概述 Agentic AI&#xff08;代理型人工智能&#xff09;是一类具备自主决策、目标导向性与持续行动能力的人工智能系统。与传统AI系统依赖外部输入和显式命令不同&#xff0c;Agentic AI在设定目标…...

编程日记 2025/9/24 18:34:21

day 17 无监督学习之聚类算法

一、聚类流程 1. 利用聚类发现数据模式 无监督算法中的聚类&#xff0c;目的就是将数据点划分成不同的组或 “簇”&#xff0c;使得同一簇内的数据点相似度较高&#xff0c;而不同簇的数据点相似度较低&#xff0c;从而发现数据中隐藏的模式。 2. 对聚类后的类别特征进行可视…...

编程日记 2025/9/23 20:13:40

《Python星球日记》 第68天：BERT 与预训练模型

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 一、BERT模型基础1. 什么是BERT？2. BERT 的结构3.预训练和微调对比二、BERT 的预训练任务1. 掩码语言模型 (MLM)2. 下一句预测 (NSP)三、微调 …...

编程日记 2025/9/24 22:56:11

Spring 集成 SM4（国密对称加密）

Spring 集成 SM4&#xff08;国密对称加密&#xff09;算法 主要用于保护敏感数据&#xff0c;如身份证、手机号、密码等。 下面是完整集成步骤&#xff08;含工具类 使用示例&#xff09;&#xff0c;采用 Java 实现&#xff08;可用于 Spring Boot&#xff09;。 一、依赖引…...

编程日记 2025/6/8 2:05:53