css 随屏幕滚动 |css div在页面居中显示

在CSS中，大家可以使用position属性控制元素的定位方式。其中，position: fixed;可以使元素相对于浏览器窗口进行定位，而不是相对于文档流中的其他元素。

.fixed-element {
position: fixed;
top: 0;
left: 0;
}

以上代码可以实现一个固定在网页顶部的元素（例如导航栏），随着页面的滚动而不断保持在顶部位置。

而如果大家希望元素始终保持在某个坐标位置，但是随着滚动而逐渐消失，可以使用opacity属性。

.fading-element {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
opacity: 1;
transition: opacity 1s ease-in-out;
}
.fading-element.hidden {
opacity: 0;
}

以上代码可以实现一个位于页面中心的元素，随着滚动而逐渐消失。其中，position: absolute;可以使元素相对于文档流中的父级元素进行定位，transform: translateX(-50%);可以使元素水平居中。

当添加.hidden类名时，元素的不透明度会逐渐变为0，实现消失的效果。同时，transition: opacity 1s ease-in-out;可以使元素的不透明度在1秒内以缓动效果过渡。

以上是CSS中实现随屏幕滚动的两个常见方式，可以根据实际需求进行选择。