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

有哪几种方法可以使html脱离文档流?

position: absolute:会使元素脱离文档流,并且相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素,则相对于 <html> 元素定位。
 

元素脱离文档流,不再占据空间。
不会影响后续元素的位置和布局。
可以通过 toprightbottom 和 left 来精确定位

position: fixed; 使元素脱离文档流,并且相对于浏览器窗口进行定位。它在滚动页面时会保持固定位置,不随页面滚动而移动。
        元素脱离文档流,固定在浏览器窗口的某个位置。
        即使页面滚动,元素仍然保持在固定位置。
        不会影响其他元素的位置。

position: sticky; 也是一种脱离文档流的方式,元素会根据页面滚动的情况在某个阈值处变为固定定位。当滚动到特定位置时,元素会粘附在视口的指定位置,直到滚动超出该范围。
        元素在正常文档流中显示,直到它到达定义的阈值位置时会“粘附”在指定位置。
        只在滚动时发生效果,适用于需要固定头部或侧边栏等场景。
        在滚动超过阈值之前,元素会占据空间

display: none; 会完全隐藏元素,并使它脱离文档流。该元素不再占据空间,后续的元素将填充它原本所在的位置。
        元素完全从页面中消失,连同其占据的空间。
        不会影响其他元素的布局。
        元素的事件和样式都不会生效,直到使用 display: block 或其他值重新显示。

visibility: hidden; 会使元素不可见,但元素仍然占据文档流中的空间。它不同于 display: none;,元素虽然看不见,但仍然影响其他元素的布局。
元素不可见,但仍占据空间。
不会响应用户交互事件。
不会影响其他元素的相对位置。


http://www.kler.cn/a/464685.html

相关文章:

  • 基于51单片机和16X16LED点阵屏(74HC138和74HC595驱动)的小游戏《贪吃蛇》
  • MarkDown怎么转pdf;Mark Text怎么使用;
  • AMP 混合精度训练中的动态缩放机制: grad_scaler.py函数解析( torch._amp_update_scale_)
  • 六十一:HTTP/2的问题及HTTP/3的意义
  • OFDM学习-(二)长短序列和PPDU整体数据处理流程
  • C# 标准数字格式字符串
  • 华为OD E卷(100分)44-单次接龙
  • 深入浅出 Beam Search:自然语言处理中的高效搜索利器
  • ThinkPHP 模板引擎使用技巧:提高开发效率
  • 第四讲 比特币的主流化与价格波动
  • [python SQLAlchemy数据库操作入门]-24.使用 Celery 与 SQLAlchemy:异步任务处理股票数据
  • 互慧-急诊综合管理平台 ServicePage.aspx 任意文件读取漏洞复现
  • Spring Security(maven项目) 3.0.2.3版本
  • Docker图形化界面工具Portainer最佳实践
  • Unix/Linux 系统中环境变量有哪些
  • 两个等号和三个等号(待查资料)
  • Centos7部署NTP服务及客户端同步实践
  • 使用 4 种主要方法将数据从 HTC 传输到华为
  • 解决Spring3.4版本中使用QueryDSL中出现MongoAnnotationProcessor使用问题
  • Javascript算法——回溯算法(组合问题)
  • Oracle 使用 sql profile 固定执行计划
  • 国产编辑器EverEdit - 常用资源汇总
  • QT---------自定义插件和库
  • Unity3D Huatuo:零成本高性能的全平台原生C#热更新方案详解
  • 玩《燕云十六声》时游戏文件丢失怎么办?
  • RabbitMQ基础篇之Java客户端 Topic交换机