CSS定位详解：relative、absolute、fixed、sticky及z-index-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44368588/article/details/102766992

本文详细介绍了CSS中的定位方式，包括relative、absolute、fixed和sticky，并特别讨论了z-index的定位层级原理。内容涵盖了层级默认值、层级比较规则以及嵌套元素时的层级显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position：

static（默认）
relative
absolute
fixed
sticky（黏性）

relative：

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流★
不影响其它元素布局★
left、top、right、bottom是相对于当前元素自身进行偏移的

absolute：

使元素完全脱离文档流★
使内联元素支持宽高（让内联具备块特性）★
使块元素默认宽高根据内容决定（让块具备内联的特性）★
如果有【定位祖先元素】相对于【定位祖先元素】发生偏移， 没有【定位祖先元素】相对于整个文档发生偏移（绝对、相对、固定）
（祖先元素也就是你父元素有没有position:绝对、相对、固定，没有就看你父元素的父元素，以此类推）

fixed:

使元素完全脱离文档流★
使内联元素支持宽高（让内联具备块特性）★
使块元素默认宽高根据内容决定（让块具备内联的特性）★
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
（相对于absolute定位的第四条，即使有【定位祖先元素】,也会相对于整个浏览器窗口进行偏移）

sticky

在指定的位置，进行黏性操作

黏性布局的用处：
在这里插入图片描述

z-index定位层级：

层级默认为0，值越大层级越高（遮挡低层级）

层级都默认为0时：
在这里插入图片描述
当box1层级大于box2层级时，box1遮挡box2：

嵌套时的小细节：

我们给box1一个父元素，此时并没有什么问题：
在这里插入图片描述
但当我们给parent一个最低的层级，发现box2遮挡了box1：

原因：比较的时候先看同一级别（parent和box2属同一级别），parent低于box2，那么此时box1的层级再高也没有意义；当parent不写z-index的时候，box1的层级才会起作用。