CSS基礎篇–使用position | sticky css
簡介前面寫了一篇文章講解了position常用的幾個屬性:《CSS基礎篇–position屬性講解》[1]一般都知道下面幾個常用的:{position:static;position:relative;position:absolute;position:fixed;}在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position[2]還說了下面這三個值:/*全域性值*/position:inherit;position:initial;position:unset;估計大部分都沒有用過position:sticky如下圖表現方式:距離頁面頂部大於20pxCSS程式碼:.sameconh2{position:-webkit-sticky;position:sticky;top:0;background:#ccc;padding:10px0;}同理...
簡介前面寫了一篇文章講解了position常用的幾個屬性:《CSS基礎篇– position屬性講解》[1]一般都知道下面幾個常用的:
{ position: static; position: relative; position: absolute; position: fixed; }在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position[2]還說了下面這三個值:
/* 全域性值 */ position: inherit; position: initial; position: unset;估計大部分都沒有用過position:sticky
如下圖表現方式:距離頁面頂部大於20px
CSS程式碼:
.samecon h2{ position: -webkit-sticky; position: sticky; top: 0; background:#ccc; padding:10px 0; }同理,也可以實現側邊導航欄的超出固定。
生效規則須指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。
並且 top 和 bottom 同時設定時,top 生效的優先順序高,left 和 right 同時設定時,left 的優先順序高。
設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible,否則 position:sticky 不會生效。這裡需要解釋一下:
如果 position:sticky 元素的任意父節點定位設定為 overflow:hidden,則父容器無法進行滾動,所以 position:sticky 元素也不會有滾動然後固定的情況。如果 position:sticky 元素的任意父節點定位設定為 position:relative | absolute | fixed,則元素相對父元素進行定位,而不會相對 viewprot 定位。
達到設定的閥值。這個還算好理解,也就是設定了 position:sticky 的元素表現為 relative 還是 fixe...