CSS定位
relative相对定位
absolute绝对定位
fixed和sticky及zIndex
relative相对定位
position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值:static( 默认) | relative | absolute | fixed | sticky
relative相对定位
如果没有定位偏移量,对元素本身没有任何影响,不使元素脱离文档流,不影响其他元素布局,left、top、right、bottom 是相对于当前元素本身身进行偏移的。
html代码
css代码
浏览器显示:
absolute绝对定位
使元素完全脱离文档流,内联元素支持宽高(让内联具备块特性),块元素默认宽根据内容决定(让块具备内联的特性);如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)。
fixed和sticky及zIndex
fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
sticky黏性定位
在指定的位置,进行黏性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题
文章来源: www.oschina.net,作者:studywin,版权归原作者所有,如需转载,请联系作者。
原文链接:https://my.oschina.net/u/4226294/blog/3119695