制作css定位
使用 position 属性进行定位
CSS 中的 position 属性是控制元素定位的核心，常用的值包括 static、relative、absolute、fixed 和 sticky。
static 是默认值，元素遵循正常的文档流，不受 top、right、bottom、left 和 z-index 属性的影响。
relative 使元素相对于其正常位置进行偏移，但仍占据文档流中的空间。其他元素不会调整位置以适应偏移后的位置。
absolute 使元素相对于最近的非 static 定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）。
fixed 使元素相对于视口进行定位，即使页面滚动，元素也会保持在固定位置。
sticky 是 relative 和 fixed 的混合体。元素在跨越特定阈值前表现为 relative，之后表现为 fixed。
设置偏移属性
偏移属性 top、right、bottom 和 left 用于指定元素相对于其定位上下文的偏移量。这些属性仅在 position 值不为 static 时生效。
对于 relative 定位，偏移量是相对于元素在正常文档流中的位置。
对于 absolute 或 fixed 定位，偏移量是相对于最近的定位祖先或视口。
sticky 定位的偏移量在元素跨越阈值前相对于正常文档流，之后相对于最近的滚动祖先。
使用 z-index 控制堆叠顺序
z-index 属性控制定位元素的堆叠顺序。数值越大，元素在堆叠顺序中越靠前。该属性仅对定位元素（position 值不为 static）有效。
当多个定位元素重叠时，z-index 可以明确它们的显示顺序。如果没有指定 z-index，元素按照它们在 HTML 中出现的顺序堆叠，后出现的元素会覆盖先出现的元素。
创建粘性定位元素
粘性定位（position: sticky）需要指定至少一个偏移属性（top、right、bottom 或 left）来定义粘性行为的触发点。
当用户的滚动位置使元素到达指定的偏移位置时，元素会从相对定位切换到固定定位，保持在视口中的指定位置。
粘性定位的父容器应有足够的高度，以确保粘性效果可以正常工作。父容器的 overflow 属性不应设置为 hidden、auto 或 scroll，否则可能会影响粘性行为。
响应式定位技巧
媒体查询可以与定位属性结合使用，为不同屏幕尺寸创建响应式布局。例如，在小屏幕上将元素设置为 static 定位，在大屏幕上设置为 fixed 定位。
使用 calc() 函数可以创建基于视口单位的动态定位值。例如 left: calc(50% - 100px) 将元素水平居中，宽度为 200px。
相对单位（如 vw、vh、%）在定位中特别有用，可以创建相对于视口或父元素尺寸的定位效果。
定位与变换的结合
transform 属性可以与定位结合使用，创建更复杂的布局效果。transform 不会影响文档流，但可以改变元素的视觉位置。
当对定位元素应用 transform 时，要注意 transform 会创建新的堆叠上下文和包含块，可能影响 absolute 定位子元素的行为。
transform: translate() 是一种高性能的移动元素方式，适合用于动画效果，因为它不会触发重排，只会触发重绘。
