CSS 有关Position = absolute (绝对定位 是相对于谁而言)

简介: CSS 有关Position = absolute (绝对定位 是相对于谁而言) css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位。   现在搞清楚了,不是相对于父元素,也不是相对于BODY。
 

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进行绝对定位。

目录
相关文章
|
2月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
2月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
88 0
|
3月前
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
42 2
|
3月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
54 1
|
3月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
28 0
|
4月前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
38 1
|
3月前
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
25 0
|
3月前
|
前端开发
css display position float 之间的关系
css display position float 之间的关系
20 0
|
5月前
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
601 3
|
5月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解