position属性通过改变元素在文档流中的定位规则实现网页布局。1.static为默认值，元素按文档流排列；2.relative使元素相对原位置偏移但仍占空间；3.absolute让元素脱离文档流并基于最近定位祖先元素定位；4.fixed使元素相对于视口固定；5.sticky结合相对与固定定位，滚动时可吸附在指定位置。使用时需注意父元素定位上下文设置及z-index堆叠层级控制。
CSS 中的 position 属性，在我看来，它就是网页布局的“魔术师”，它决定了元素如何脱离或依附于正常的文档流，从而实现精确的定位。这玩意儿用好了，那些你觉得天马行空的视觉效果，比如图片叠加、浮动工具栏、或者滚动时吸顶的导航，都能变得轻而易举。它赋予了我们超越常规排列的自由，让元素能在屏幕上“想去哪儿就去哪儿”。
解决方案
position 属性的核心在于改变元素在文档流中的定位规则。默认情况下，所有元素都是 static 定位，它们乖乖地按照 HTML 的书写顺序，从左到右、从上到下排列。但一旦你给一个元素设置了 position 的其他值，比如 relative、absolute、fixed 或 sticky，它就获得了“特权”，可以通过 top, right, bottom, left 这些偏移量属性来调整位置了。
具体来说：
立即学习“前端免费学习笔记（深入）”；
-
static: 这是默认值。元素按照正常的文档流排列，top,right,bottom,left属性对它无效。它就像一个普通公民，按部就班。 -
relative: 相对定位。元素仍然在正常的文档流中占据空间，但你可以使用top,right,bottom,left来相对于它“本来应该在的位置”进行偏移。有趣的是，即使它偏移了，它原先占据的空间依然保留着，不会影响其他元素的布局。我个人觉得relative经常是absolute的“幕后老板”，提供定位上下文。 -
absolute: 绝对定位。这个值让元素彻底脱离了文档流，不再占据空间。它会相对于最近的那个“已定位”的祖先元素（即position值不是static的祖先）进行定位。如果没有这样的祖先，它就会相对于初始包含块（通常是）定位。它就像一个自由职业者，不占用工位，但得有个“基地”去参照。 -
fixed: 固定定位。元素也脱离了文档流，并且它会相对于视口（viewport）进行定位。这意味着无论你如何滚动页面，它都会“钉”在屏幕的某个位置，非常适合做导航栏、回到顶部按钮或者广告条。 -
sticky: 粘性定位。这是一个比较新的特性，它结合了relative和fixed的特点。在元素到达某个滚动阈值之前，它表现得像relative；一旦达到那个阈值，它就变成了fixed，直到它的父元素完全滚出视口。这在实现吸顶导航或侧边栏时简直是神器，省去了大量的 JavaScript 计算。
深入理解 CSS position: relative 与 position: absolute 的精髓
这两种定位方式，在实际开发中是使用频率最高，也最容易混淆的。它们的区别在于，relative 元素仍然是文档流的一部分，它只是相对于自己的“家”移动了一点点，而它的“家”还在那里，别人都知道。所以，如果你把一个 relative 元素向左移动了 20px，它原来的位置依然被它占据着，旁边的元素不会因此而“补位”过来。
.box-relative {
position: relative;
left: 20px; /* 相对于它原本的位置向右偏移20px */
background-color: lightblue;
width: 100px;
height: 100px;
}而 absolute 元素呢，它就像是“隐身”了，从文档流中消失了。它不再占据任何空间，其他元素会当它不存在一样进行布局。它的定位基准是最近的那个非 static 定位的祖先元素。如果找不到，那就只能以 body 为参照了。这就意味着，如果你想让一个 absolute 元素精确地定位在某个父元素内部，那个父元素就必须设置 position: relative (或者 absolute, fixed, sticky)。这是我见过太多次新手犯的错误，忘记给父元素加 position: relative，结果 absolute 元素跑到了页面的某个角落。
<div class="parent-relative">
<div class="child-absolute"></div>
</div>.parent-relative {
position: relative; /* 关键！为子元素提供定位上下文 */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child-absolute {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: orange;
}这种“父相子绝”的模式，几乎是前端布局的黄金法则之一。
何时选择 fixed 定位？sticky 又在哪些场景下大放异彩？
fixed 定位，顾名思义，就是“固定”在那里不动。它的坐标是相对于浏览器视口的，所以你滚动页面，它依然稳如泰山。这在很多场景下都非常实用，比如网站的顶部导航栏、底部版权信息，或者一些浮动的在线客服按钮。用户无论滚动到哪里，这些元素都触手可及，提供了很好的用户体验。但要注意，因为它脱离了文档流，可能会遮挡住页面内容，所以需要仔细规划其位置和大小。
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 60px;
z-index: 1000; /* 确保它在最上层 */
}而 sticky 定位则更具动态性，它像一个“聪明”的元素。它在默认情况下表现得像 relative，随着页面的滚动而移动。但一旦它到达了你设定的 top, right, bottom, left 阈值，它就会“粘”在那个位置，表现得像 fixed。直到它的父元素完全滚出视口，它才会再次“松手”，继续随父元素滚动。
最典型的应用场景就是文章详情页的侧边目录，或者电商网站的筛选条件。当用户向下滚动时，目录或筛选条件会一直保持在顶部，方便用户随时点击或修改。这种用户体验，用 fixed 很难直接实现，因为它无法感知父元素的边界，而 sticky 完美解决了这个问题。
.sticky-sidebar {
position: sticky;
top: 20px; /* 距离视口顶部20px时开始“粘”住 */
align-self: flex-start; /* 如果在flex或grid容器中 */
width: 200px;
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
}需要注意的是，sticky 定位在一些复杂的布局，比如 overflow 属性的容器中，行为可能会有些出乎意料，需要仔细测试。而且它也需要一个明确的 top, right, bottom, left 值才能生效。
掌握 z-index 与堆叠上下文：解决元素层叠覆盖的奥秘
当我们使用 position 属性让元素脱离文档流时，它们就可能出现层叠（overlapping）的情况。这时候，z-index 就成了决定哪个元素在哪个元素之上的关键。简单来说，z-index 值越大，元素就越靠近用户，也就是在更上层。但这里有个坑，z-index 只对已定位（positioned）的元素（即 position 值不是 static 的元素）有效。如果你给一个 static 元素设置 z-index，它是不会有任何效果的。
然而，仅仅理解 z-index 的大小比较还不够，更深层次的概念是堆叠上下文（stacking context）。这是一个非常重要的概念，很多时候 z-index 看起来“失效”了，就是因为你没有理解堆叠上下文。
一个堆叠上下文可以理解为一个独立的“层叠区域”，在这个区域内部，元素的 z-index 才会进行比较。不同堆叠上下文之间的元素，它们的 z-index 比较是无效的，而是由它们各自堆叠上下文的层级决定。
如何创建一个新的堆叠上下文呢？ 常见的几种方式包括：
- 任何
position属性值为relative,absolute,fixed,sticky的元素，并且设置了非auto的z-index值。 -
opacity属性值小于 1 的元素。 -
transform,filter,perspective属性值不是none的元素。 -
will-change属性值包含opacity,transform等的元素。 -
flex容器的子元素如果设置了z-index并且position不是static。 -
grid容器的子元素如果设置了z-index并且position不是static。
举个例子，假设你有两个 div，divA 和 divB，它们都有 position: relative。如果 divA 的 z-index 是 10，divB 的 z-index 是 5，那么 divA 会在 divB 上面。但如果 divA 内部有一个 spanC，spanC 有 position: absolute 和 z-index: 100，而 divB 内部有一个 spanD，spanD 也有 position: absolute 和 z-index: 200。你可能会以为 spanD 一定在 spanC 上面。不一定！如果 divA 的 z-index 比 divB 高，那么 divA 整个堆叠上下文都在 divB 之上，即使 spanD 自身的 z-index 值更大，它也无法突破 divB 所在层级，去覆盖 divA 内部的 spanC。
理解了堆叠上下文，你就能更好地调试那些“为什么我的弹窗被遮住了”或者“这个元素怎么跑到下面去了”的问题了。它要求你思考的不是单个元素的 z-index，而是它们所处的“层叠环境”。
