css中定位相关的属性 |css header悬停

.position {
position: relative;
top: 10px;
left: 20px;
right: 30px;
bottom: 40px;
}

其中，position属性指定元素的定位方式，可选值有static（默认值）、relative、absolute、fixed和sticky。当指定为relative时，元素会相对于其原来的位置进行移动，移动的方向由top、left、right和bottom属性决定。这些属性的值可以是长度值（如像素、百分比等）或自定义值（如auto），表示元素相对于定位边界的偏移。

.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

当指定为absolute时，元素会相对于最近的已定位祖先元素进行定位，如果不存在已定位祖先元素，则相对于文档的左上角进行定位。此外，fixed属性指定元素相对于视口的位置进行定位，而sticky属性指定元素会在跨越特定阈值前为相对定位，之后为固定定位。

.overflow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}

除了position属性外，overflow属性也与元素的位置相关，它指定了元素内容的溢出处理方式。当指定为auto时，元素会根据内容自动设置溢出滚动，而当指定为hidden时，元素溢出部分将被隐藏。

.parent {
position: relative;
height: 200px;
overflow: auto;
}
.child {
position: absolute;
top: 100%;
left: 0;
}

最后，还有一个重要的概念是定位边界，它是指元素相对位置的参考点。对于static定位的元素，其定位边界为包含块（通常是父元素），而对于非static定位的元素，其定位边界为最近的定位祖先元素。如果存在嵌套关系，则子元素的定位边界为包含块或最近的定位祖先元素中离它最近的一个。