CSS文档定位指南：static、relative、absolute、fixed、sticky详解
2026-10-24 10:32:33
CSS中position属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。
静态定位position:static此属性未HTML元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。
在此属性下，属性值top、left、right、bottom和z-index对HTML元素没有影响。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{width:480px;height:320px;background-color:#008800;}.child{width:240px;height:160px;background-color:#ff0000;}.sibling{width:240px;height:160px;background-color:#0000ff;}</style>效果如图：
为什么使用它呢？将元素设置为position:static的唯一原因是强制删除应用于无法控制的元素上的某些定位。
相对定位position:relative此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。
position:relative相对于它的当前位置放置一个元素而不改变它周围的布局。
在此属性下，设置相对定位元素的top、right、bottom和left属性会导致它被调整到远离其正常位置。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;z-index:5;left:50px;top:50px;}.child{width:240px;height:160px;background-color:#ff0000;}.sibling{width:240px;height:160px;background-color:#0000ff;}</style>效果如图：
为什么要使用它？此属性下引入了在该元素上使用z-index的能力，这对于静态定位position:static的元素并不真正起作用。
绝对定位position:absolute此属性是相对于最近父级元素的位置，如果绝对定位元素没有定位的父级元素，它将使用文档body并随着页面滚动而移动。position:absolute相对于其父元素的位置放置一个元素并改变它周围的布局。
关于绝对定位的权衡是，这些元素将从页面的元素流中删除，具有这种定位类型的元素不受其它元素的影响，也不影响其它元素。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;}.child{position:absolute;width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}.sibling{position:absolute;width:240px;height:160px;left:100px;top:100px;background-color:#0000ff;z-index:1;}</style>效果如图：
在此属性下，同一父级元素中，z-index值大的在最上层。
绝对定位元素是相对于最近定位的祖先来定位自身。一旦它找到一个已定位的祖先，该祖先之上的元素的位置就不再相关。
相对定位和绝对定位的主要区别在于，position:absolute会将子元素完全脱离文档的正常流程，并且该子元素将相对于具有自己的位置集的第一个父元素进行定位。
固定定位position:fixed相对于视窗定位，即使页面滚动，也始终停留在同一位置上。固定定位元素不会在其所在的页面中留下间隙，其他元素会填补缺失的地方。
<divclass="parent"><divclass="child"></div></div><divclass="sibling"></div><styletype="text/css">.parent{position:relative;width:480px;height:320px;background-color:#008800;}.child{width:240px;height:160px;background-color:#ff0000;left:20px;top:20px;z-index:2;}.sibling{position:fixed;width:240px;height:160px;right:50px;bottom:50px;background-color:#0000ff;z-index:1;}</style>效果如图：
基于用户的滚动位置定位，根据滚动位置在relative和fixed之间切换。相对定位，直到在视窗中遇到给定的偏移位置，然后它固定到位，就像position:fixed一样。
position:sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearestscrollingancestor）和containingblock(最近块级祖先nearestblock-levelancestor)，包括table-related元素，基于top、right、bottom和left的值进行偏移，偏移值不会影响任何其他元素的位置。
作者：天行无忌热门标签
