在CSS中，top、right、bottom、left是用于控制定位元素位置的核心属性，它们需要和position属性配合使用才能生效。不同的position取值会让这四个属性的参考基准和计算逻辑产生明显差异，理解这些差异是实现精准布局的关键。
一、position属性的五种取值
position属性决定了元素的定位模式，也直接影响了top、right、bottom、left的生效规则，常见的取值有以下五种：
- static：默认值，元素遵循正常文档流，top等四个属性完全不生效
- relative：相对定位，元素相对于自身在正常文档流中的位置进行偏移
- absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位
- fixed：固定定位，元素相对于浏览器视口进行定位
- sticky：粘性定位，元素在正常文档流和固定定位之间切换，达到阈值时触发固定效果
二、不同定位模式下属性生效规则
1. static定位
当元素position为static时，属于正常文档流，top、right、bottom、left四个属性设置后不会有任何效果，元素位置由文档流规则决定。
/* 以下设置不会生效，元素仍在正常文档流中 */
.static-box {
position: static;
top: 20px;
left: 30px;
}
2. relative定位
relative定位的元素会保留原本在文档流中的空间，偏移是相对于自身原来的位置计算的。top表示距离原位置顶部向下偏移的距离，right表示距离原位置右侧向左偏移的距离，bottom和left同理。
.relative-box {
position: relative;
/* 相对于原位置向下偏移20px，向右偏移30px */
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background: #f0f0f0;
}
3. absolute定位
absolute定位的元素会脱离正常文档流，其位置参考的是最近的非static定位的祖先元素。如果不存在这样的祖先，就参考初始包含块（通常是html元素）。top表示距离参考元素顶部的内边距区域的距离，其他三个属性同理。
/* 父元素设置相对定位，作为子元素的定位参考 */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #e8e8e8;
}
/* 子元素绝对定位，距离父元素顶部20px，左侧30px */
.child {
position: absolute;
top: 20px;
left: 30px;
width: 80px;
height: 80px;
background: #ff9900;
}
4. fixed定位
fixed定位的元素同样脱离文档流，参考基准是浏览器视口，即使页面滚动，元素位置也不会发生变化。top表示距离视口顶部的距离，其他属性参考视口的对应边缘。
.fixed-box {
position: fixed;
/* 固定在视口右下角，距离底部20px，右侧20px */
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #00cc99;
}
5. sticky定位
sticky定位是相对定位和固定定位的结合，元素在跨越设定的阈值前表现为relative，达到阈值后表现为fixed。比如设置top: 20px，当元素距离视口顶部小于等于20px时，就会固定在视口顶部下方20px的位置。
.sticky-box {
position: sticky;
/* 当元素距离视口顶部0px时，固定在顶部 */
top: 0;
background: #6699ff;
padding: 10px;
}
三、常见使用注意事项
1. 当同时设置对立方向的属性时，比如同时设置top和bottom，absolute和fixed定位下，元素高度会被拉伸以同时满足两个属性的值，而relative定位下只有top会生效，bottom会被忽略。
2. 属性的取值可以是像素、百分比、em等单位，百分比的取值是相对于参考元素的对应维度尺寸计算的，比如left: 10%是参考元素宽度的10%。
3. 如果元素设置了margin或者transform属性，可能会影响定位的参考基准，尤其是absolute定位的参考祖先如果设置了transform属性，会被当作非static定位的祖先来处理。
4. 粘性定位sticky目前需要确认浏览器的兼容性，部分旧版本浏览器可能不支持该属性。