CSS中相对、固定、绝对及粘性定位的应用场景

在CSS中,不同的定位方式(相对定位、固定定位、绝对定位和粘性定位)各自有其特定的使用场景。以下是这些定位方式的详细说明和使用场景:

1. 相对定位(Relative Positioning)

使用场景:

  • 微调元素位置: 当你需要对元素进行微小的位置调整,而不影响其他元素时,可以使用相对定位。
  • 创建叠加效果: 通过相对定位,可以将一个元素相对于其正常位置移动,从而实现叠加效果。
  • 作为绝对定位的参考点: 绝对定位的元素会相对于最近的已定位(非static)祖先元素进行定位,如果没有这样的祖先元素,则相对于初始包含块(通常是视口)。相对定位的元素可以作为绝对定位元素的参考点。

示例代码:

.relative-element {position: relative;top: 10px;left: 20px;
}

2. 固定定位(Fixed Positioning)

使用场景:

  • 固定导航栏: 当页面滚动时,导航栏仍然保持在视口的顶部或底部。
  • 侧边栏: 创建固定在页面一侧的侧边栏,即使页面滚动也不会移动。
  • 弹出窗口: 创建固定在屏幕上的弹出窗口或提示框。

示例代码:

.fixed-element {position: fixed;top: 0;right: 0;
}

3. 绝对定位(Absolute Positioning)

使用场景:

  • 创建弹出菜单: 绝对定位可以用来创建弹出菜单或工具提示,这些元素相对于其最近的已定位祖先元素进行定位。
  • 覆盖层: 创建覆盖整个页面或部分页面的覆盖层。
  • 嵌套元素: 在复杂的布局中,绝对定位可以用来精确控制嵌套元素的位置。

示例代码:

.absolute-element {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

4. 粘性定位(Sticky Positioning)

使用场景:

  • 粘性导航栏: 当页面滚动到一定位置时,导航栏会固定在视口的顶部或底部。
  • 粘性侧边栏: 创建一个在滚动到一定位置时固定在视口一侧的侧边栏。
  • 粘性表头: 在长表格中,表头在滚动时保持可见。

示例代码:

.sticky-element {position: sticky;top: 0;
}

总结

  • 相对定位适用于微调元素位置或作为绝对定位的参考点。
  • 固定定位适用于需要在页面滚动时保持固定位置的元素。
  • 绝对定位适用于需要精确控制元素位置,尤其是相对于其最近的已定位祖先元素。
  • 粘性定位适用于在滚动到一定位置时固定元素,介于相对定位和固定定位之间。

选择合适的定位方式取决于具体的设计需求和用户体验目标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/889694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Please activate LaTeX Workshop sidebar item to render the thumbnail of a PDF

Latex代码中使用pdf图片,无法预览,提示: Please activate LaTeX Workshop sidebar item to render the thumbnail of a PDF 解决办法: 点击左边这个刷新下即可

openEuler centOS 统信UOS 配置ip的方式。

前言: 不同的Linux发行版,其基础命令基本相同。 配置网络的具体方式缺可能有多种方式。经过实操,发现openEuler centOS 统信UOS这三种操作系统的配置网络方式一样,所以记录下操作步骤。 在openEuler、centOS、统信UOS上配置静态IP地址&…

测试工程师的职业规划

测试人员在管理上的发展 基层测试管理者:测试组长 工作内容:安排小组工作,提升小组成员测试能力,负责重要的测试工作。 负责对象:版本,项目 中层测试管理者:测试经理 负责对象&#xff1…

Linux系统下多任务管理器:screen使用指南

文章目录 安装快速入门启动Screen会话创建和管理窗口退出和恢复会话 高级功能多用户支持日志记录复制粘贴模式自定义配置 在Linux和类Unix系统的世界里,命令行是用于与系统交互的主要方式之一。然而,当涉及到远程服务器管理、长时间运行的任务或者同时处…

Android系统卡启动问题排查

Android系统启动正常来说会涉及到如下几个过程: 引导加载程序(Bootloader)Linux内核(Kernel),负责硬件抽象、内存管理、进程管理、网络堆栈等init进程 init进程读取init.rc配置文件,用于启动各…

C缺陷与陷阱 — 8 编译与链接

目录 1 程序的编译过程 2 动态链接的优缺点 2.1 动态链接的优点 2.2 动态链接的缺点 2.3 只使用动态链接 3 函数库链接的5个特殊秘密 4 警惕Interpositioning 5 产生链接器报告文件 1 程序的编译过程 程序的编译过程是将源代码转换成计算机可以执行的机器代码的过程。…

Harmony Next开发Navigation页面跳转

概述 Harmony Next开发Navigation页面跳转 知识点 Navigation通过NavPathStack路由跳转Navigation以弹窗的方式打开NavDestination页面Menu配置 组件 NavTest Entry Component struct NavTest {Provide pageInfos: NavPathStack new NavPathStack()Builder PageMap(name…

网络安全之漏洞

网络安全中漏洞是什么? 定义 在网络安全领域,漏洞是指系统、应用程序、网络设备等在设计、实现、配置或维护过程中存在的弱点或缺陷。这些弱点能够被攻击者利用,从而突破系统的安全策略,获取未经授权的访问、执行恶意操作或者泄露…

配置ssh-key连接github

GitHub 通过在 2022 年 3 月 15 日删除旧的、不安全的密钥类型来提高安全性。 具体内容参考如下链接 https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent mac配置 ssh-keygen -t ed25519 -C …

【Android】解决 ADB 中 SELinux 设置与 `Failed transaction (2147483646)` 错误

解决 ADB 中 SELinux 设置与 Failed transaction (2147483646) 错误 在使用 ADB 进行开发和调试时,经常会遇到由于 Android 系统安全策略(SELinux)引起的权限问题,尤其是在执行某些操作时,可能会遇到类似 cmd: Failur…

大模型系列4--开源大模型本地部署到微调(WIP)

背景 一直想真正了解大模型对硬件资源的需求,于是准备详细看一篇视频,将核心要点总结记录下。本文内容参考视频:保姆级教程:6小时掌握开源大模型本地部署到微调,感谢up主 训练成本 训练 > 微调 > 推理训练GPT…

仿《公主连结》首页场景的制作(附资源包)

先看效果(主要实现点击按钮切换图片,未解锁按钮弹出提示,点击过后播放动画) 预备知识(单例模式,携程, Resources.Load加载资源的方式) 资源准备(底部按钮7个图标&#x…

Redis - 集合 Set 及代码实战

Set 类型 定义:类似 Java 中的 HashSet 类,key 是 set 的名字,value 是集合中的值特点 无序元素唯一查找速度快支持交集、并集、补集功能 常见命令 命令功能SADD key member …添加元素SREM key member …删除元素SCARD key获取元素个数SI…

基于Llamaindex的网页内容爬取实战

目的 本文不关注如何解析网页 html 元素和各种 python 爬虫技术,仅作为一种网页数据的预处理手段进行研究。Llamaindex 也并不是爬虫技术的集大成者,使用它是为了后续的存查一体化。 安装依赖 pip install llama-index-readers-web # pip install llam…

《九重紫》逐集分析鉴赏第一集(下)

主标题:《九重紫》一起追剧吧 副标题:《九重紫》逐集分析鉴赏第一集(下)/《九重紫》逐集分析鉴赏1 接上回分解,窦昭和宋墨都安置城外万佛寺 交谈没一会儿,天还未亮,兵临寺下 记住这个人&…

Introduction to NoSQL Systems

What is NoSQL NoSQL database are no-tabular非數據表格 database that store data differently than relational tables 其數據的存儲方式與關係型表格不同 Database that provide a mechanism機制 for data storage retrieval 檢索 that is modelled in means other than …

图论【Lecode_HOT100】

文章目录 1.岛屿数量No.2002.腐烂的橘子No.9943.课程表No.2074.实现Trie(前缀树)No.208 1.岛屿数量No.200 class Solution {public int numIslands(char[][] grid) {if (grid null || grid.length 0) {return 0;}int numIslands 0;int rows grid.len…

【深度学习量化交易9】miniQMT快速上手教程案例集——使用xtQuant获取基本面数据篇

我是Mr.看海,我在尝试用信号处理的知识积累和思考方式做量化交易,应用深度学习和AI实现股票自动交易,目的是实现财务自由~目前我正在开发基于miniQMT的量化交易系统。 在前几篇的文章中讲到,我正在开发的看海量化交易系统&#xf…

网络层IP协议(TCP)

IP协议: 在了解IP协议之前,我们市面上看到的"路由器"其实就是工作在网络层。如下图: 那么网络层中的IP协议究竟是如何发送数据包的呢? IP报头: IP协议的报头是比较复杂的,作为程序猿只需要我们重…

Xcode

info.plist Appearance Light 关闭黑暗模式 Bundle display name 设置app名称,默认为工程名 Location When In Use Usage Description 定位权限一共有3个key 1.Privacy - Location When In Use Usage Description 2.Privacy - Location Always and When In U…