position: absolute; left: 78px; right: 32px; 子集怎么设置 滚动
时间: 2024-09-18 11:04:37 浏览: 26
`position: absolute;` 是CSS中的定位属性,它会使元素脱离正常的文档流,定位到其相对于最近的已定位祖先元素的位置。在这个例子中,元素的左边界设为78像素,右边界设为32像素,这意味着元素会固定在其父容器内的某个位置。
如果想让这个绝对定位的子元素随着滚动条滚动而保持相对位置不变,通常需要给包含它的容器添加滚动功能,并设置`overflow`属性。例如:
```css
.parent-container {
width: auto;
overflow-x: auto; /* 如果只希望水平滚动 */
overflow-y: auto; /* 如果希望同时垂直和水平滚动 */
padding-right: calc(78px + 32px); /* 添加元素所需的总边距以容纳滚动 */
}
/* 或者,如果你想要元素始终保持相同的偏移量,可以使用scroll-snap-type属性 */
.parent-container {
display: flex;
scroll-snap-type: x mandatory; /* 只对X轴启用滚动 snap */
-ms-scroll-position-x: 0; /* IE/Edge */
scrollbar-width: none; /* 隐藏滚动条 */
}
```
这样,当用户滚动`.parent-container`时,子元素`position: absolute; left: 78px; right: 32px`会跟随容器一起滚动,但看起来像是固定在了某个位置上。
阅读全文