跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

在css中relative与absolute区别

relative不脱离文档流,相对于自身原位置偏移,原空间保留;2. absolute脱离文档流,相对于最近的已定位祖先元素定位,无则相对视口;3. relative不影响布局,absolute可能引发其他元素位置变化,常用于弹窗、悬浮等场景。

在CSS中,relative和absolute是两种常见的定位方式,它们决定了元素如何在页面中定位,但行为上有本质区别。

relative:相对自身原来位置偏移设置position: relative;的元素仍然占据它在文档流中的原始位置。你可以通过top、right、bottom、left属性来调整它的显示位置,但这个偏移是相对于它原本的位置进行的,不会影响其他元素的布局。

元素仍处在正常文档流中偏移后原位置依然被保留常用于微调元素位置或作为绝对定位元素的参考父容器absolute:脱离文档流,相对于最近的定位祖先元素设置position: absolute;的元素会完全脱离文档流,不占据任何空间。它的定位基准是“最近的已定位(即 position 为 relative、absolute 或 fixed)的祖先元素”。如果没有这样的祖先,则相对于初始包含块(通常是视口)。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更下载元素不再占据原文档流的空间定位参考点是最近的定位祖先元素常用于弹窗、悬浮按钮、图层覆盖等需要精确控制位置的场景关键区别总结是否脱离文档流:relative 不脱离,absolute 脱离定位参照物:relative 相对自己原位置;absolute 相对于最近的定位祖先对其他元素的影响:relative 偏移不影响布局;absolute 可能导致其他元素“上移”

基本上就这些。理解清楚它们的定位机制,就能更灵活地控制页面布局。不复杂但容易忽略的是父级是否设置了定位,这对 absolute 至关重要。

立即学习“前端免费学习笔记(深入)

”;

相关文章