- 首页 > it技术 > >
- 相对定位
【CSS样式——元素定位】position:relative
- 在没有设置偏移量时，对元素本身没有影响
- 设置相对定位后，元素不会脱离文档流，并且不会影响其他元素布局，但依旧占位
- 绝对定位
position:absolute
- 设置绝对定位后，元素会脱离文档流
- 设置绝对定位后，行内元素支持块元素特性，块元素支持行内元素特性
- 设置绝对定位后，元素参照最近设置相对定位的父级元素进行偏移定位，如果所有父级元素没有进行设置相对定位，则按照整个文档窗口进行定位
- 固定定位
position:fixed
- 始终以浏览器可视窗口进行定位，不会受到窗口滚动和父级元素定位的影响
- 设置固定定位后，元素脱离文档流
- 设置固定定位后，行内元素支持块元素特性，块元素支持行内元素特性
- 黏性定位
position:sticky
- 没有到达指定偏移位置无定位效果，当到达指定偏移位置后元素固定在那个位置不动
- 设置定位元素偏移量
向左偏移语法：`left:10px`
向右偏移语法：`right:10px`
向上偏移语法：`top:10px`
向下偏移语法：`bottom:10px`
- 设置定位元素显示层级关系
z-index:数值
- 设置定位元素的层叠顺序，值越大，层级就越高，显示在上层
- 父元素的层级会影响子元素的层级关系
- 值为auto时，不参与层级关系比较
推荐阅读
