position属性是CSS中用于控制元素定位方式的核心属性，它通过不同的取值决定元素在页面中的参考坐标系、是否脱离文档流以及与其他元素的层叠关系，是前端布局中不可或缺的属性。不同的position取值会让元素呈现出完全不同的显示效果，同时也会带来一些常见的布局异常问题。
position属性的常见取值及显示影响
position属性共有5个常用取值，分别是static、relative、absolute、fixed、sticky，每个取值的作用和显示效果差异较大。
1. static 静态定位
这是position属性的默认值，元素会按照正常的文档流进行排列，不会受到top、right、bottom、left等偏移属性的影响。此时元素的位置完全由文档流规则决定，和其他普通元素没有区别。
2. relative 相对定位
元素会先按照正常文档流的位置显示，然后以自身原来的位置为参考坐标系，根据top、right、bottom、left属性进行偏移。偏移后元素原本在文档流中占有的空间不会被其他元素占据，也就是说元素不会脱离文档流，只是视觉上发生了位置变化。
/* relative定位示例 */
.box {
position: relative;
top: 20px;
left: 30px;
}
3. absolute 绝对定位
元素会完全脱离文档流，不再占据原来的空间，其他元素会忽略该元素的存在进行排列。其定位参考坐标系是最近的position取值不为static的祖先元素，如果不存在这样的祖先元素，则参考整个html文档的根元素。偏移属性top、right、bottom、left会生效，控制元素相对于参考坐标系的位置。
/* absolute定位示例 */
.parent {
position: relative; /* 作为子元素的定位参考 */
width: 300px;
height: 300px;
}
.child {
position: absolute;
top: 50px;
right: 20px;
}
4. fixed 固定定位
元素同样会脱离文档流，其定位参考坐标系是浏览器的可视窗口，无论页面如何滚动，元素都会固定在相对于可视窗口的指定位置，不会随页面内容滚动而移动。常见的应用场景是页面顶部的固定导航栏、侧边的固定回到顶部按钮等。
/* fixed定位示例 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
5. sticky 粘性定位
这是相对定位和固定定位的结合体，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。阈值由top、right、bottom、left属性决定，比如设置top: 0，当元素距离可视窗口顶部的距离为0时，就会固定在该位置。需要注意的是sticky定位的生效需要父元素没有设置overflow: hidden、overflow: auto等属性，否则会失效。
/* sticky定位示例 */
.tab-bar {
position: sticky;
top: 0;
background: #fff;
padding: 10px;
}
position属性常见的异常情况及解决方法
在使用position属性进行布局时，经常会遇到一些不符合预期的异常情况，以下是几类高频问题及对应的解决思路。
1. 绝对定位元素找不到参考坐标系
异常情况：给元素设置了position: absolute，同时设置了偏移属性，但是元素没有按照预期的位置显示，而是相对于整个页面根元素定位。
原因：绝对定位元素的参考坐标系是最近的position取值不为static的祖先元素，如果所有祖先元素的position都是默认的static，那么就会参考根元素定位。
解决方法：给需要作为参考的祖先元素设置position: relative，不需要设置偏移属性也可以作为参考坐标系，这样子元素的absolute定位就会以该祖先元素为参考。
2. 固定定位元素被父元素限制
异常情况：给元素设置了position: fixed，但是元素没有固定在可视窗口的指定位置，而是随着父元素一起滚动，或者位置出现偏移。
原因：如果fixed定位元素的父元素设置了transform、perspective、filter等CSS属性，那么fixed定位的参考坐标系会变成该父元素，而不是浏览器的可视窗口，这是CSS规范的规定。
解决方法：尽量避免在fixed定位元素的父元素上使用transform、perspective、filter等属性，如果必须使用，可以将fixed定位元素移到这些父元素的外层，保证其参考坐标系是可视窗口。
3. 粘性定位不生效
异常情况：给元素设置了position: sticky和对应的阈值属性，但是元素没有表现出粘性定位的效果，一直保持相对定位的状态。
原因：常见的原因有两个，一是父元素设置了overflow: hidden、overflow: auto、overflow: scroll等属性，导致粘性定位失效；二是没有给元素设置对应的阈值属性，比如只设置了position: sticky，没有设置top、bottom等属性，粘性定位不会生效。
解决方法：首先检查父元素是否有overflow相关的设置，如果有可以调整父元素的overflow属性，或者将粘性定位元素移到父元素外层；其次确认是否设置了正确的阈值属性，比如需要元素在顶部固定就设置top: 0。
4. 定位元素层级混乱
异常情况：多个定位元素（position取值不为static的元素）出现重叠时，后面的元素覆盖了前面的元素，不符合预期的层级顺序。
原因：定位元素会覆盖普通文档流的元素，同时定位元素的层级由z-index属性决定，z-index值越大的元素层级越高，会显示在上面。如果元素没有设置z-index，那么后出现的定位元素会覆盖先出现的定位元素。
解决方法：给需要调整层级的元素设置z-index属性，注意z-index只对position取值不为static的元素生效。如果层级还是不符合预期，需要检查父元素是否设置了z-index，子元素的z-index只在父元素的层级范围内生效。
5. 脱离文档流的元素导致父元素高度塌陷
异常情况：父元素内部只有绝对定位或者固定定位的子元素，父元素的高度变成了0，没有被子元素撑开。
原因：绝对定位和固定定位的元素会脱离文档流，不会参与父元素高度的计算，所以父元素如果没有设置固定高度，就会出现高度塌陷的问题。
解决方法：如果父元素需要被子元素撑开，尽量避免让子元素使用脱离文档流的定位方式，或者给父元素设置固定的高度；如果必须使用脱离文档流的定位，也可以通过JavaScript动态计算子元素的高度，然后赋值给父元素。
position属性使用注意事项
在使用position属性时，还需要注意以下几点：首先，不要滥用定位属性，能用文档流和flex、grid等布局解决的需求，尽量不使用position，避免带来不必要的布局复杂度；其次，偏移属性top、right、bottom、left只对position取值不为static的元素生效，对static定位的元素设置这些属性不会有任何效果；最后，使用定位属性时要提前考虑元素在不同屏幕尺寸下的显示效果，避免出现定位偏移导致元素超出可视区域的问题。