css新定位类型 |css定义颜色类名

position: sticky;
top: 0;

CSS是前端工程师必须掌握的技能之一。而CSS里最常用的定位方式是相对定位、绝对定位和固定定位。但是这些定位方式都有它们的限制，对于那些需要在滚动时一直可见的元素而言，它们并不能很好的解决这个问题。针对这个问题，CSS3新增了一种新的定位方式——“sticky”。

“sticky”定位方式是指元素在滚动到某个位置时，会固定在当前位置，直到该元素到达指定的位置，接着就恢复原来的定位方式。这个指定的位置通常是相对于该元素属于的元素的边缘的位置。

.wrapper {
height: 2000px;
}
.banner {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100px;
background-color: #fff;
}

上面的代码展示了如何使用“sticky”定位方式。首先使用“wrapper”元素模拟滚动，其高度为2000px。在“wrapper”元素内部，大家定义了一个“banner”元素，它的高度为100px，并使用“sticky”定位方式。当用户滚动页面时，当“banner”元素的顶部移动到“wrapper”元素顶部时，该元素会固定在这个位置，直到滚动到指定位置时才会释放。这样，在滚动页面时，“banner”元素会像固定在页面顶部一样运行，直到停留在指定位置。

综上所述，“sticky”定位方式是CSS3新增的一种比较实用的定位方式，有利于解决一些滚动时需要一直可见的元素的问题。