css中有绝对定位法，以前一直搞不懂绝对定位是相对于谁而言的绝对定位。
现在搞清楚了，不是相对于父元素，也不是相对于BODY。
而是相对于所属元素树中，相邻最近的那个显示标识了position属性的元素。
比如
<div id="a" style="position:relative">
<div id="b">
<div id="c" style="position:absolute">
</div>
</div>
</div>
div#c就是根据div#a进行绝对定位。
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
2012-03-30
1026
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
css中有绝对定位法，以前一直搞不懂绝对定位是相对于谁而言的绝对定位。
现在搞清楚了，不是相对于父元素，也不是相对于BODY。
<div id="a" style="position:relative">
<div id="b">
<div id="c" style="position:absolute">
</div>
</div>
</div>
目录
相关文章
|
4月前
|
前端开发
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式：相对定位、绝对定位和固定定位，并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
86
0
0
|
4月前
|
前端开发
UED
开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力？带你彻底理解粘性定位的奇妙世界！
【8月更文挑战第20天】在前端开发中，CSS的粘性定位（`position: sticky`）是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位，达到指定阈值时转为固定定位，非常适合制作“吸顶”导航栏等。例如，设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏，还可应用于侧边栏等，增强布局灵活性与用户体验。尽管如此，仍需注意不同浏览器间的兼容性和可能的布局冲突。
185
0
0
|
5月前
|
前端开发
|
5月前
|
前端开发
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
80
1
1
|
6月前
|
前端开发
定位技术
开发者
CSS基础-定位：static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式：static、relative、absolute和fixed，强调理解它们的差异对前端开发者的重要性。static遵循正常文档流，relative通过偏移量调整位置但不脱离文档流，absolute完全脱离文档流并依附于最近的非static祖先元素，fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略，并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
50
1
1
|
5月前
|
前端开发
容器
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
106
0
0
|
5月前
|
前端开发
JavaScript
|
5月前
|
前端开发
|
7月前
|
前端开发
|
7月前
|
前端开发
容器