欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中Position:Sticky不起作用的問(wèn)題解決

  發(fā)布時(shí)間：2024-02-18 16:43:02   作者：帶腦子的CV工程師   我要評(píng)論
本文主要介紹了CSS中Position:Sticky不起作用的問(wèn)題解決，包含了5種不生效的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

sticky屬性不生效：

  • 檢查瀏覽器兼容性；
  • 檢查是否指定了閾值；
  • 檢查 Safari 的供應(yīng)商前綴；
  • 檢查祖先元素是否具有overflow屬性集；
  • 檢查height父屬性是否未設(shè)置；
  • 檢查父元素是否為 Flexbox。
  • 檢查瀏覽器兼容性
  • 在檢查其他問(wèn)題之前，最好確保您使用的瀏覽器支持position: sticky.

1、檢查是否已指定閾值

粘性元素需要指定一個(gè)閾值：
top:0
right:0
bottom:0
left:0
這幾個(gè)屬性必須寫(xiě)一個(gè)
例如：
.sticky {
    position：stickty；
    kop：0；
}

2、檢查 Safari 的供應(yīng)商前綴

確保為屬性值添加供應(yīng)商前綴以支持低于 13 的 Safari 版本，例如，如下所示：
.sticky {
    position：-webkit-sticky;
    position：sticky；
    tokp：0；
}

3、檢查祖先元素是否具有overflow屬性集

如果粘性元素的任何父/祖先設(shè)置了以下任何屬性overflow，
position: sticky將不起作用（除非您在溢出容器上指定高度）：
overflow: hidden
overflow: scroll
overflow: auto
檢查具有overflow屬性集的父母的片段：
只需在瀏覽器的 Web 開(kāi)發(fā)人員控制臺(tái)中復(fù)制/粘貼以下代碼片段，即可識(shí)別overflow屬性設(shè)置為 以外的所有父元素visible：
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}
如何使用position: sticky該overflow屬性？
通過(guò)在溢出容器上指定高度，您應(yīng)該能夠position: sticky在容器元素設(shè)置overflow屬性的同時(shí)進(jìn)行工作。

4、檢查height父屬性是否未設(shè)置

如果父元素沒(méi)有設(shè)置 height，則粘性元素在滾動(dòng)時(shí)將沒(méi)有任何可粘附的區(qū)域。
發(fā)生這種情況是因?yàn)檎承栽刂荚谠谌萜鞯母叨葍?nèi)粘附/滾動(dòng)。

5、檢查父元素是否是 Flexbox

如果粘性元素的父元素是彈性盒，則有兩種情況需要檢查：

粘性元素已a(bǔ)lign-self: auto設(shè)置（默認(rèn)設(shè)置）；
粘性元素已a(bǔ)lign-self: stretch設(shè)置。
如果粘性元素已a(bǔ)lign-self: auto設(shè)置：
在這種情況下， 的值align-self將計(jì)算為父項(xiàng)的align-items值。
因此，如果父級(jí)有align-items: normal（默認(rèn)設(shè)置）或align-items: stretch設(shè)置，
則意味著粘性元素的高度將拉伸以填充整個(gè)可用空間。這將沒(méi)有空間讓粘性元素在父元素中滾動(dòng)。

如果粘性元素已a(bǔ)lign-self: stretch設(shè)置：
在這種情況下，粘性元素會(huì)拉伸到父元素的高度，并且沒(méi)有任何區(qū)域可以滾動(dòng)。

如何使粘性元素在 Flexbox 中可滾動(dòng)：
您可以簡(jiǎn)單地將屬性的值設(shè)置align-self為align-self: flex-start。這會(huì)將粘性元素放在開(kāi)頭并且不會(huì)拉伸它。

到此這篇關(guān)于CSS中Position:Sticky不起作用的問(wèn)題解決的文章就介紹到這了,更多相關(guān)CSS Position:Sticky不起作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • position:sticky 粘性定位的幾種巧妙應(yīng)用詳解

    這篇文章主要介紹了position:sticky 粘性定位的幾種巧妙應(yīng)用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小
    2021-04-23

  • 詳解css粘性定位position：sticky問(wèn)題采坑

    這篇文章主要介紹了詳解css粘性定位position：sticky問(wèn)題采坑的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下
    2019-08-26

  • 用position:sticky完美解決小程序吸頂問(wèn)題的實(shí)現(xiàn)方法

    這篇文章主要介紹了用position:sticky完美解決小程序吸頂問(wèn)題的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下
    2021-04-23

  • CSS使用position:sticky 實(shí)現(xiàn)粘性布局的方法

    這篇文章主要介紹了CSS使用position:sticky 實(shí)現(xiàn)粘性布局的方法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-31

  • position:sticky用法介紹及瀏覽器兼容性

    用戶(hù)的屏幕越來(lái)越大，而頁(yè)面太寬的話會(huì)不宜閱讀，所以絕大部分網(wǎng)站的主體寬度和之前相比沒(méi)有太大的變化，于是瀏覽器中就有越來(lái)越多的空白區(qū)域，所以你可能注意到很多網(wǎng)站開(kāi)
    2012-12-25

  • css中position:sticky 粘性定位詳解

    粘性定位的元素是依賴(lài)于用戶(hù)的滾動(dòng)，在position:relative與position:fixed定位之間切換，這篇文章給大家介紹css中position:sticky 粘性定位的相關(guān)知識(shí)，感興趣的朋友跟隨小
    2024-02-28

最新評(píng)論