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

CSS Position 属性完全指南

news 来源：原创 2025/6/23 17:34:46

CSS 中的 position 属性是布局的基础，它决定了元素在页面中的定位方式。理解各种定位值的行为和适用场景对于构建灵活、响应式的布局至关重要。

position 属性的五个主要值

1. static（默认值）

  • 元素遵循正常的文档流
  • 不受 top, right, bottom, left 属性影响
  • 不能通过 z-index 控制层级
  • 实际上表示"没有定位"的状态
.element {position: static;
}

2. relative（相对定位）

  • 相对于元素原本在文档流中的位置进行偏移
  • 使用 top, right, bottom, left 属性设置偏移量
  • 不会影响其他元素的位置，即使它被移动了
  • 保留原来的空间（留下"空洞"）
  • 可以作为绝对定位元素的定位上下文
.element {position: relative;top: 10px;left: 20px; /* 向右移动20px，向下移动10px */
}

3. absolute（绝对定位）

  • 完全脱离文档流
  • 相对于最近的已定位祖先元素（非static）定位
  • 如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）
  • 不保留原来的空间
  • 可以通过 top, right, bottom, left 精确定位
.parent {position: relative; /* 创建定位上下文 */
}
.child {position: absolute;top: 0;right: 0; /* 放置在父元素的右上角 */
}

4. fixed（固定定位）

  • 完全脱离文档流
  • 相对于**视口(viewport)**进行定位
  • 不受页面滚动影响，始终保持在视口的固定位置
  • 不保留原来的空间
  • 忽略任何父元素的影响（除非父元素使用了特定的CSS变换）
.navbar {position: fixed;top: 0;left: 0;width: 100%; /* 创建一个固定在顶部的导航栏 */
}

5. sticky（粘性定位）

  • 结合了相对定位和固定定位的特性
  • 初始行为类似于相对定位
  • 当元素达到指定的阈值（如 top: 0）时，行为类似于固定定位
  • 但仅在其父容器的可视区域内有效
  • 一旦父容器滚出视图，元素会随之离开
  • 不完全脱离文档流，保留原有空间
.section-header {position: sticky;top: 0; /* 当滚动到顶部时粘附 */background: white;z-index: 1;
}

实际应用对比

fixed vs. sticky

这两个属性是最容易混淆的，关键区别在于：

  • fixed 元素相对于整个浏览器窗口定位，永远固定在指定位置
  • sticky 元素会在特定阈值前保持正常流布局，达到阈值后才"粘附"，且仅在父容器范围内生效

在抽屉组件、模态框或侧边栏等嵌套UI元素中，使用 fixed 会导致元素定位在整个窗口中，可能跳出父容器；而 sticky 会尊重容器边界，是更合适的选择。

嵌套布局中的最佳实践

在复杂UI中，推荐的定位策略是：

  1. 使用 Flex 或 Grid 布局建立基本结构
  2. 对需要在特定容器内滚动时保持可见的元素使用 position: sticky
  3. 仅对需要相对于整个视口定位的全局元素使用 position: fixed
  4. 使用 position: absolute 进行精确定位，但记得设置一个非static的父元素作为定位上下文

总结

理解 CSS position 属性的各个值及其行为差异，对于构建复杂而稳健的布局至关重要。特别是在构建嵌套UI组件时，正确选择定位方式可以避免许多常见的布局问题。

在实际开发中，通常会结合使用这些定位方式，而不是仅依赖于某一种。关键是根据具体需求选择合适的定位策略，并理解它们如何相互作用。

相关文章：

CSS Position 属性完全指南

CSS 中的 position 属性是布局的基础，它决定了元素在页面中的定位方式。理解各种定位值的行为和适用场景对于构建灵活、响应式的布局至关重要。 position 属性的五个主要值 1. static（默认值） 元素遵循正常的文档流不受 top, right, botto…...

编程日记 2025/6/23 17:34:46

热度上升，25西电机电工程学院（考研录取情况）

1、机电工程学院各个方向 2、机电工程学院近三年复试分数线对比 学长、学姐分析 由表可看出： 1、力学25年相较于24年下降35分，为255分 2、机械工程25年相较于24年下降15分，为320分 3、仪器科学与技术25年相较于24年上升35分，为…...

编程日记 2025/6/23 17:11:42

R7周：糖尿病预测模型优化探索

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 一、数据预处理 1.设置GPU import torch.nn.functional as F import torch.nn as nn import torch, torchvisiondevice torch.device("cuda"…...

编程日记 2025/6/23 15:31:37

使用Go语言实现轻量级消息队列

文章目录 一、引言1.1 消息队列的重要性1.2 为什么选择Go语言1.3 本文实现的轻量级消息队列特点 二、核心设计2.1 消息队列的基本概念2.1.1 消息类型定义2.1.2 消息结构设计 2.2 架构设计2.2.1 基于Go channel的实现方案2.2.2 单例模式的应用2.2.3 并发安全设计 2.3 消息发布与…...

编程日记 2025/6/23 15:53:53

QT窗口相关控件及其属性

widget，PushButton，lineEdit等都是基于QWidget延展出来的 并不是完整的窗口，而是作为窗口的一部分 真正的窗口是QMainWindow 菜单栏 Qt中的菜单栏是通过QMenuBar这个类来实现的，一个主窗口最多只有一个菜单栏，位于主…...

编程日记 2025/6/23 16:19:31

OceanBase 复合索引指南

一、 什么是复合索引，与单列索引的区别是什么 1.1 什么是复合索引 复合索引是指在数据库表中由两个或更多列共同构成的索引，也称多列索引。其独特之处在于，它并非仅针对单一列建立索引，而是对多个列的组合进行索引，从…...

编程日记 2025/6/23 17:28:02

蛋白质大语言模型ESM介绍

ESM（Evolutionary Scale Modeling）是 Meta AI Research 团队开发的一系列用于蛋白质的预训练语言模型。这些模型在蛋白质结构预测、功能预测和蛋白质设计等领域展现出了强大的能力。以下是对 ESM 的详细介绍： 核心特点 大规模预训练：基于大规模蛋白质序列数据进行无监督学…...

编程日记 2025/6/23 17:29:18

回归测试：保障软件质量的重要防线

在软件开发的生命周期中，变更无处不在——新功能添加、缺陷修复、性能优化或代码重构。但每一次变更都可能像投入平静水面的石子，引起意想不到的涟漪效应。这就是回归测试(Regression Testing)存在的意义，它是软件质量保障体系中不可或缺的一…...

编程日记 2025/6/23 17:20:24

51单片机中断

80C51 单片机的中断源及其默认优先级（从高到低）： 优先级中断源中断号1️⃣外部中断 0 （INT0）IE0，编号 02️⃣定时器 0 （T0）TF0，编号 13️⃣外部中断 1 （INT…...

编程日记 2025/6/23 16:35:32

Ollama 常见命令速览：本地大模型管理指南

Ollama 常见命令速览：本地大模型管理指南 一、什么是 Ollama？ Ollama 是一个轻量级工具，允许用户在本地快速部署和运行大型语言模型（LLM），如 Llama、DeepSeek、CodeLlama 等。其命令行工具设计简洁&#…...

编程日记 2025/6/23 16:05:12

LSPatch官方版：无Root Xposed框架，自由定制手机体验

在Android设备的自定义和优化过程中，Xposed框架一直是一个强大的工具。然而，许多用户因为Root操作的复杂性和风险而望而却步。今天，我们要介绍的 LSPatch官方版，就是这样一款基于LSPosed核心的无Root Xposed框架解决方案。它不仅提…...

编程日记 2025/6/23 17:30:35

星火燎原：大数据时代的Spark技术革命在数字化浪潮席卷全球的今天，海量数据如同奔涌不息的洪流，传统的数据处理方式已难以满足实时、高效的需求。

星火燎原：大数据时代的Spark技术革命 在数字化浪潮席卷全球的今天，海量数据如同奔涌不息的洪流，传统的数据处理方式已难以满足实时、高效的需求。Apache Spark作为大数据领域的璀璨明星，凭借其卓越的性能和强大的功能&#xff0c…...

编程日记 2025/6/23 9:08:14

Spark-Streaming(三)

一. kafka和flume的整合 任务需求一:利用flume监控某目录中新生成的文件，将监控到的变更数据发送给kafka，kafka将收到的数据打印到控制台 1. 在flume/conf/目录下添加flume-kafka.conf文件 配置文件如下 2. 启动flume和kafka消费者 3. 传入数据 查看fl…...

编程日记 2025/6/23 17:11:43

深入了解C# List集合及两种常见排序算法：插入排序与堆排序

在C#中&#xff0c;List<T> 是一种常用的集合类型&#xff0c;它提供了对动态数组的灵活操作&#xff0c;能够方便地添加、删除和访问元素。而排序算法是计算机科学中非常重要的部分&#xff0c;插入排序和堆排序是两种经典的排序方法。本文将详细讲解C#中 List<T>…...

编程日记 2025/6/23 16:05:13

【软件设计师】模拟题三

以下是另外10道不重复的软考-软件设计师模拟试题&#xff0c;答案及解析统一放在最后&#xff1a; ​​试题部分​​ ​​在软件工程中&#xff0c;敏捷开发&#xff08;Agile Development&#xff09;的核心实践之一是&#xff1f;​​ A. 严格的文档编写 B. 基于里程碑的计划…...

编程日记 2025/6/23 10:11:14

什么是CN2专线？全面解析中国电信的高性能网络服务

一、CN2专线的定义 CN2专线&#xff08;China Telecom Next Carrier Network&#xff09;是中国电信推出的新一代高性能网络专线服务&#xff0c;旨在满足企业对高速、稳定、安全网络连接的深度需求。它基于优化的网络架构设计&#xff0c;通过分布式路由、多路径传输等技术&a…...

编程日记 2025/5/29 8:48:45

5.4 AgentLite：轻量级库，便于构建任务导向的LLM Agent系统

AgentLite 是一个轻量级、模块化设计的开源框架&#xff0c;专注于构建任务导向的基于大语言模型&#xff08;LLM&#xff09;的智能代理&#xff08;Agent&#xff09;系统。与其他功能丰富但较为复杂的框架&#xff08;如 LangChain 或 AutoGen&#xff09;相比&#xff0c;A…...

编程日记 2025/6/23 17:28:01

shell脚本3

for语句&#xff08;一种循环控制结构&#xff0c;用于遍历列表或者范围内的元素&#xff0c;并对每个元素执行一段代码语法格式 for 变量名 in 取值列表 do 命令序列 done 入门示例&#xff1a; for i in 1 2 3 4 5 6 # for i in {1..6} 或 for i in …...

编程日记 2025/6/21 1:42:03

Kafka Tool(Offset Explorer)国内下载: Kafka可视化连接工具

Kafka Tool&#xff08;现称为 Offset Explorer&#xff09;是一款专为 Apache Kafka 集群设计的可视化连接客户端工具&#xff0c;主要用于消息的可视化浏览、消费者偏移量的管理、主题的管理以及数据的实时监控。作为一款商用软件&#xff0c;它以其直观的用户界面和强大的功…...

编程日记 2025/6/23 11:15:30

【JAVA】高并发场景下，如何保证数据的一致性和系统的稳定性？

数据一致性 数据库事务&#xff1a;使用数据库的事务机制&#xff0c;确保一组数据的相关操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而保证数据的一致性。例如&#xff0c;在转账操作中&#xff0c;涉及到转出账户扣款和转入账户加款两个操作&#xff0c;这两个…...

编程日记 2025/6/23 14:52:54

【Linux篇】理解信号：如何通过信号让程序听从操作系统的指令

信号的悄然到来&#xff1a;当操作系统发出‘警告’时 一.信号1.1 基本概念1.2 产生信号方式1.2.1 键盘产生信号1.2.2 系统调用产生信号1.2.2.1 kill1.2.2.2 raise1.2.2.3 abort 1.2.3 调用系统命令1.2.4 异常1.2.5 软件条件产生信号1.2.5.1 pause1.2.5.2 alarm 二. 最后 信号的…...

编程日记 2025/6/23 16:05:13

统计服务器CPU、内存、磁盘、网络IO、队列、数据库占用空间等等信息

文章目录 一、背景二、说明三、页面四、代码前端MonitorServiceProcessPage.vueMonitorServiceProcessTable.vueMonitorServiceProcessTableButton.vueaddMonitorTask.vueproductOperation.vueshowMonitorTask.vueMonitorSystemLog.vueMonitorTask.vueMonitorTaskLog.vueRealti…...

编程日记 2025/6/23 16:17:49

WSL 安装过程整理

WSL 安装过程整理 一、WSL 安装教程二、安装后小技巧1、安装位置2、常用命令 三、在 WSL2 中安装 perf&#xff1a; 一、WSL 安装教程 史上最全的WSL安装教程 WSL2 最新最全帮助小白一步步详细安装教程 在WSL2 root 和普通用户的切换 轻松搬迁&#xff01;教你如何将WSL从C盘迁…...

编程日记 2025/6/23 15:30:12

纯CSS吃豆人(JS仅控制进度)

一、效果展示 二、源码 html <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Pac-Man SVG Demo…...

编程日记 2025/6/23 16:09:24

redis 数据类型新手练习系列——Hash类型

redis 数据类型 Redis 主要支持以下几种数据类型&#xff1a; &#xff08;1&#xff09;string&#xff08;字符串&#xff09;: 基本的数据存储单元&#xff0c;可以存储字符串、整数或者浮点数。 &#xff08;2&#xff09;hash&#xff08;哈希&#xff09;:一个键值对集…...

编程日记 2025/6/23 15:37:26

如何使用@KafkaListener实现从nacos中动态获取监听的topic

1、简介 对于经常需要变更kafka主题的场景&#xff0c;为了实现动态监听topic的功能&#xff0c;可以使用以下方式。 2、使用步骤 2.1、添加依赖 <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactI…...

编程日记 2025/6/23 16:03:32

区块链如何达成共识：PoW/PoS/DPoS的原理、争议与适用场景全解

引言 区块链技术的核心在于​​去中心化网络中的信任机制​​&#xff0c;而共识算法是实现这一目标的关键。不同的共识机制在效率、安全性、去中心化程度等方面各有取舍。本文将深入解析三种主流共识机制——​​工作量证明&#xff08;PoW&#xff09;​​、​​权益证明&am…...

编程日记 2025/6/23 17:26:53

Oracle for Linux安装和配置（11）——Oracle安装和配置

11.3. Oracle安装和配置 Linux上Oracle的安装及配置与Windows上差不多，只是安装软件的准备等有所不同，下面只对不同于Windows的部分进行较为详细的讲解，其他类似部分不再赘述。另外，无论选择使用虚机还是物理机，Oracle安装、配置和使用等方面几乎都是完全一样的。 11.3.…...

编程日记 2025/6/23 16:48:11

http协议详解附带c/c++服务器和客户端源码

http详解 代码部分HTTP请求结构示例HTTP客户端实现&#xff08;使用Linux系统调用&#xff09;简易HTTP服务器实现 深入解析HTTP协议&#xff1a;从基础到实践1. HTTP协议核心概念1.1 协议本质解读1.2 通信模型详解 2. 抓包分析实战2.1 Fiddler工具妙用2.2 报文结构拆解 3. 请求…...

编程日记 2025/6/23 17:24:01

JavaScript性能优化实战（5）：数据结构与算法性能优化

JavaScript中常用数据结构性能对比 数据结构的选择对JavaScript应用的性能有着决定性的影响。不同的数据结构在不同操作上各有优劣，选择合适的数据结构能显著提升应用性能。本节将对JavaScript中常用的数据结构进行全面的性能对比分析。 基本数据结构时间复杂度概览 首先，…...

编程日记 2025/6/23 15:58:02

uniapp小程序开发入门01-快速搭建一个空白的项目并预览它

uniapp小程序开发入门01-快速搭建一个空白的项目并预览它&#xff01;由于近期有市场需求和计划&#xff0c;构建一套自己的小程序&#xff0c;所以再次带领大家系统的过一遍&#xff0c;如何使用uniapp程序快速构建一套完整的项目。今天是第一小节&#xff0c;带领大家快速构建…...

编程日记 2025/6/23 17:20:23

UR5 UR5e机器人URDF文件

URDF全称为Unified Robot Description Format，中文可以翻译为“统一机器人描述格式”。与计算机文件中的.txt文本格式、.jpg图像格式等类似，URDF是一种基于XML规范、用于描述机器人结构的格式。根据该格式的设计者所言，设计这一格式的目的在于提供一种尽可能通用（as genera…...

编程日记 2025/6/23 15:51:18

ubuntu20.04安装x11vnc远程桌面

x11vnc是一个VNC服务器, 安装后我们可以不依赖外部的显示设备, 通过网络远程登录ubuntu桌面。 安装x11vnc sudo apt-get install x11vnc 设置VNC登录密码 sudo x11vnc -storepasswd /etc/x11vnc.pwd 设置x11vnc在开机时自动启动 新建如下文件: sudo vi /lib/systemd/sys…...

编程日记 2025/6/23 15:53:54

AKM旭化成微电子全新推出能量收集IC“AP4413系列”

旭化成微电子开始批量生产用于环保发电的电荷控制集成电路&#xff01;优化充电电池的充放电&#xff0c;广泛应用于智能遥控器和蓝牙TMTag等设备。 01 概述 旭化成微电子株式会社&#xff08;AKM&#xff09;开发出面向小型二次电池&#xff08;充电电池&#xff09;的环境…...

编程日记 2025/6/23 15:31:38

机器人行业研究系列报告

新质生产力系列报告&#xff1a;2024年人形机器人核心场景发展洞察研究报告 具身机器人行业现状及未来趋势分析 2025 2025年人形机器人投资策略&#xff0c;量产元年&#xff0c;全球共振&#xff0c;百家争鸣 人形机器人行业深度报告&#xff08;一&#xff09;&#xff1a…...

编程日记 2025/6/1 1:48:38

利用JMeter代理服务器方式实现高效压测

前言 在当今快节奏的互联网时代&#xff0c;确保Web应用和服务能够在高负载下稳定运行变得至关重要。无论是电子商务平台、社交媒体网络还是在线教育服务&#xff0c;用户对网站响应速度和稳定性的期望从未如此之高。因此&#xff0c;性能测试不再是一个可选项&#xff0c;而是…...

编程日记 2025/6/20 5:29:43

NLP高频面试题（五十五）——DeepSeek系列概览与发展背景

大型模型浪潮背景 近年来，大型语言模型（Large Language Model, LLM）领域发展迅猛，从GPT-3等超大规模模型的崛起到ChatGPT的横空出世，再到GPT-4的问世，模型参数规模和训练数据量呈指数级增长。以GPT-3为例，参数高达1750亿，在570GB文本数据上训练，显示出模型规模、数据…...

编程日记 2025/6/22 1:33:50

2015-2023 各省 GDP 数据，用QuickBI 进行数据可视化——堆叠图！

嘿&#xff0c;数据爱好者们&#xff01;今天咱要来一场刺激的数据冒险&#xff0c;深入剖析全国各省的 GDP 数据&#xff0c;而且会借助强大的 QuickBI 工具&#xff0c;用超酷炫的堆叠图让这些数据 “活” 起来&#xff0c;带你一眼看清经济格局&#xff01; 地址&#xff1…...

编程日记 2025/6/21 5:45:27

MySQL优化（持续更新）笔记

一、insert优化 &#xff1a; 之前&#xff1a;项目通常是一条insert一条的执行&#xff0c;每一次都需要与MySQL进行建立连接进行网络传输&#xff0c;效率很低 现在&#xff1a; 1.- 批量插入&#xff08;一条sql就行&#xff0c;一次500-1000&#xff09; 可以与MyBatis…...

编程日记 2025/5/30 3:49:43

MySQL表的操作 -- 表的增删改查

目录 1. 表的创建2. 表的查看3. 表的修改4. 表的删除5. 总结 1. 表的创建 1.查看字符集及效验规则 2. 表的创建 CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎;创建用户表1 创建用…...

编程日记 2025/5/29 9:39:13

Java 数组：深度解析

前言 数组作为Java中最基础也是最强大的数据结构之一，其高效性和灵活性在性能关键型应用中无可替代。本文将从进阶使用开始，逐步深入探索Java数组的高级特性和大师级技巧，帮助开发者全面掌握数组技术的精髓。 一、数组基础回顾与性能特性 1.1 数组基本特性对比 特性Java数…...

编程日记 2025/6/23 15:57:28

【基于Qt的QQMusic项目演示第一章】从界面交互到核心功能实现

&#x1f339; 作者: 云小逸 &#x1f91f; 个人主页: 云小逸的主页 &#x1f91f; motto: 要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前&#xff0c;其次就是现在&…...

编程日记 2025/6/19 20:20:10

[Mybatis-plus]

简介 MyBatis-Plus &#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变。Mybatis-plus官网地址 注意&#xff0c;在引入了mybatis-plus之后&#xff0c;不要再额外引入mybatis和mybatis-spring&#xff0c;避免因为版本…...

编程日记 2025/6/20 5:01:03

【EDA】EDA中聚类（Clustering）和划分（Partitioning）的应用场景

在VLSI物理设计自动化中&#xff0c;聚类&#xff08;Clustering&#xff09;和划分&#xff08;Partitioning&#xff09;是两个互补但目标和应用场景截然不同的关键步骤&#xff0c;其核心区别如下&#xff1a; 一、应用阶段与核心目标 1. 聚类&#xff08;Clustering&…...

编程日记 2025/5/28 16:04:49

PySide与PyQt对比：为何PySide是更优选择

PySide与PyQt对比&#xff1a;为何PySide是更优选择 引言 在Python桌面应用开发领域&#xff0c;Qt框架的绑定库一直是首选方案。两大主要选择—PySide和PyQt&#xff0c;虽然功能相似&#xff0c;但在许可证、性能和支持方面存在显著差异。本文将深入探讨为何PySide通常是更…...

编程日记 2025/5/30 7:04:41

LVGL移植高通矢量字库GT5SLAD3BFA

字库芯片: GT5SLAD3BFA MCU: STM32F429 LVGL版本&#xff1a;V8.4 一&#xff0c;实现gt_read_data() gt_read_data()函数的作用&#xff1a;与字库flash进行通信&#xff0c;函数的定义里调用spi发送数据和接收数据的接口。用户只需要实现该函数&#xff0c;就可以…...

编程日记 2025/6/23 7:20:09

7.0 sharpScada的sql数据的安装

本文介绍开源库SharpScada的配置过程。 1&#xff0c;还原数据库 2.打开SQL server2014配置启动器&#xff0c;并启用Named Pipes,以及TCP/IP 3.启动SQL Server服务中的SQL Server Browser 4.允许远程连接...

编程日记 2025/5/29 18:05:27

杂项知识点

杂项 1 激活函数1.1 sigmoid1.2 tanh1.3 Relu1.4 leakRelu 1 激活函数 常用的激活函数包括sigmoid tanh Relu leakRelu 1.1 sigmoid import torch import numpy as np import matplotlib.pyplot as plt # sigmoid tanh Relu leakRelu ## 1 sigmoid ### 1.1 代码复现sig…...

编程日记 2025/6/19 20:51:23

Android项目升级插件到kotlin 2.1.0后混淆网络请求异常

背景 项目kt插件1.9.24升级到2.1.0后打包编译release网络请求失败了。 retrofit版本2.9.0 错误详情 java.lang.ClassCastException: java.lang.Class cannot be cast to java.lang.reflect.ParameterizedTypeat retrofit2.m.a(Unknown Source:2477)at retrofit2.K.invoke(U…...

编程日记 2025/6/20 16:49:35

uniapp 仿企微左边公司切换页

示例代码&#xff1a; <template><view class"container"><!-- 遮罩层 --><view class"mask" v-if"showSidebar" click"closeSidebar"></view><!-- 侧边栏 --><view class"sidebar"…...

编程日记 2025/6/1 17:51:54