Relative 定位与Absolute 定位实例
一直没有弄懂相对定位与绝对定位之间的关系，今天特来学习一下。本实践都是在360浏览器下测试所得。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .hv { position:relative; left:100px; top:150px; } .hv2 { position: absolute; left:100px; top:150px; } h2{ background-color:gray;} p{background-color: red;} </style> <title> last </title> </head> <body> <h2 class="hv2">This is a heading an absolute position This is a heading an absolute positionThis is a heading an absolute positionThis is a heading an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere 方法on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>
获得html高度是68px=p元素高度+margin=36px+16px+16px=body高度+p的margin=36px+16px+16px
获得body高度是36px=p元素高度=36px
获得h2高度是54px margin 20px
获得p高度是36px margin 16px
修改一下把样式改成hv 即position:relative 则
获得html高度是146px=body高度+h2 顶部margin +p底部 margin=110px+20px+16px
获得body高度是 110px=h2高度+p元素高度+h2与p元素之间的margin=54px+36px+20px=110px
获得h2高度是54px margin 20px
获得p元素高度是36px margin 16px
不设置样式即默认
获得html高度是146px=body高度+h2 顶部margin +p底部 margin=110px+20px+16px
获得body高度 110px=h2高度+p元素高度+h2与p元素之间的margin=54px+36px+20px=110px
获得h2高度 54px margin 20px
获得p元素高度 36px margin 16px
得出结论：
position:relative 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
position:absolute 定位使元素的位置与文档流无关，因此不占据空间。
相对定位占空间，绝对定位不占空间
参考：http://www.runoob.com/css/css-positioning.html
相关博文：http://blog.csdn.net/dyllove98/article/details/8967114
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？