css:position
position 属性是 CSS 中用于控制元素定位的重要属性，它决定了元素在文档中的定位方式以及如何响应 top、right、bottom、left 属性。下面详细介绍各个取值及其特点：[*] static（默认值）
[*]描述：所有元素默认的定位方式，按照正常的文档流举行排布。
[*]特点：
[*]不受 top、left、bottom、right 属性影响。
[*]不会产生新的定位上下文，也不会改变元素原有的位置。
[*] relative（相对定位）
[*]描述：元素相对于其正常位置举行偏移。
[*]特点：
[*]仍然生存在文档流中，占据原来的空间。
[*]可以通过 top、right、bottom、left 属性来调整元素相对于其正常位置的偏移量。
[*]偏移后，元素的原始位置仍会占据空间，其他元素不会由于该元素移动而重新结构。
.relative-box {
position: relative;
top: 10px; /* 向下移动10像素 */
left: 20px; /* 向右移动20像素 */
}
[*] absolute（绝对定位）
[*]描述：元素离开文档流，相对于最近的已定位（非 static）祖先举行定位。
[*]特点：
[*]离开正常文档流，不占据空间，其他元素会像该元素不存在一样举行排布。
[*]如果没有已定位的父元素，则相对于初始包含块（通常是 html 或 body）举行定位。
[*]常用于创建重叠结构或浮动层。
.container {
position: relative; /* 父容器设置定位，作为绝对定位的参考 */
}
.absolute-box {
position: absolute;
top: 0;
right: 0;
}
[*] fixed（固定定位）
[*]描述：元素相对于欣赏器视口举行定位，即使页面滚动也保持固定。
[*]特点：
[*]离开正常文档流，不占据空间。
[*]常用于创建固定导航栏、回到顶部按钮等。
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
}
[*] sticky（粘性定位）
[*]描述：元素在滚动过程中体现为相对定位，当滚动到达设定阈值时变为固定定位。
[*]特点：
[*]结合了 relative 和 fixed 的特性。
[*]在达到指定的滚动位置之前，它会像相对定位那样参与文档流；一旦凌驾阈值，便会固定在指定位置。
[*]注意：sticky 定位的父元素不应有 overflow: hidden、overflow: scroll 或 overflow: auto 属性，否则可能会影响其体现。
.sticky-box {
position: sticky;
top: 0; /* 当滚动到离顶部0的位置时，元素会固定在顶部 */
}
总结：
[*]static 用于默认的静态结构。
[*]relative 允许在原有位置上做偏移，但仍生存原位置的空间。
[*]absolute 和 fixed 都会离开正常文档流，区别在于定位参照不同：absolute 相对于最近的定位祖先，fixed 相对于欣赏器视口。
[*]sticky 则是根据滚动位置在相对与固定之间切换。
通过理解这些定位方式，你可以更机动地控制页面结构，实现各种复杂的 UI 设计。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]