relative不脱离文档流,相对于自身原位置偏移;absolute脱离文档流,相对于最近非static定位祖先定位,常用于精确布局。

relative 和 absolute 是 CSS 中常用的定位方式,它们都基于 position 属性实现,但行为上有本质区别。理解它们的差异对布局控制非常关键。
元素设置 position: relative 后,仍然占据文档流中的原始空间。通过 top、bottom、left、right 可以相对于它原本的位置进行偏移。
div {
position: relative;
top: 10px;
left: 20px;
}这个 div 会从它原本的位置向下 10px、向右 20px 偏移,但原来的空间依然保留。
元素设置 position: absolute 后,会完全脱离文档流,不再占据空间。它的定位参考点是最近的非 static 定位的祖先元素;如果没有这样的祖先,则相对初始包含块(通常是视口)定位。
NITC效益型企业网站系统(PHP)产品特色1、企业网站模块:1)网站设计精美:前台页面全部采用DIV+CSS,设计严谨,布局合理,页面精美大气。2)管理操作方便:后台管理界面友好,简单易用,区别于一般CMS系统的复杂与繁琐,功能强大,系统安全,性能稳定。用户使用全自动化控制,功能模块可扩展性强。2、搜索引擎优化: 经众多网络营销专家制定,系统自带搜索引擎基础优化功能,能在最短的时间内提升网站的曝
0
立即学习“前端免费学习笔记(深入)”;
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}此时 .child 会定位在 .parent 的右上角,因为 .parent 是第一个非 static 定位的祖先。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号