本文详细介绍了CSS中的定位属性，包括`position`的四种模式：static、relative、absolute和fixed。重点讲解了fixed定位在上下滚动时的特性，以及如何设置。同时，还探讨了堆叠上下文的概念，解释了元素的层次关系和堆叠顺序，帮助读者深入理解CSS布局和定位原理。
定位（position）
说起定位之前先复习一下文档流/正常流normal flow，即浏览器默认的文档布局方式：
- 内联元素从左到右
- 块级元素另起一行
定位就是通过设置position属性的值来覆盖默认的布局方式！使用top、left、right 、bottom来改变位置
position属性：
position: static默认值默认的布局方式。position: relative相对默认的布局位置进行定位。相对定位就是“相对自己定位”。position: absolute绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。
定位上下文就是指 绝对定位元素 相对 哪个元素定位，默认的定位上下文是<html>。
假如你想设定某个绝对定位元素的定位上下文，则需要在这个元素的父元素上设置position: relative。
position: fixed相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。position: sticky是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于top属性的值时，转变为固定定位。
absolute 和 fixed
- 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
- 绝对定位的元素的位置是相对于距离最近的
非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位 - 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过
z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
