CSS新定位類型：sticky

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新增的一種比較實用的定位方式，有利于解決一些滾動時需要一直可見的元素的問題。