CSS中Position:Sticky不起作用的问题解决

段小草CSS2024-02-20 06:00:176140

sticky属性不生效：

检查浏览器兼容性；
检查是否指定了阈值；
检查 Safari 的供应商前缀；
检查祖先元素是否具有overflow属性集；
检查height父属性是否未设置；
检查父元素是否为 Flexbox。
检查浏览器兼容性
在检查其他问题之前，最好确保您使用的浏览器支持position: sticky.

1、检查是否已指定阈值

粘性元素需要指定一个阈值：
top:0
right:0
bottom:0
left:0
这几个属性必须写一个
例如：
.sticky {
    position：stickty；
    kop：0；
}

2、检查 Safari 的供应商前缀

确保为属性值添加供应商前缀以支持低于 13 的 Safari 版本，例如，如下所示：
.sticky {
    position：-webkit-sticky;
    position：sticky；
    tokp：0；
}

3、检查祖先元素是否具有overflow属性集

如果粘性元素的任何父/祖先设置了以下任何属性overflow，
position: sticky将不起作用（除非您在溢出容器上指定高度）：
overflow: hidden
overflow: scroll
overflow: auto
检查具有overflow属性集的父母的片段：
只需在浏览器的 Web 开发人员控制台中复制/粘贴以下代码片段，即可识别overflow属性设置为 以外的所有父元素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属性？
通过在溢出容器上指定高度，您应该能够position: sticky在容器元素设置overflow属性的同时进行工作。

4、检查height父属性是否未设置

如果父元素没有设置 height，则粘性元素在滚动时将没有任何可粘附的区域。
发生这种情况是因为粘性元素旨在在容器的高度内粘附/滚动。

CSS中Position:Sticky不起作用的问题解决第1张

5、检查父元素是否是 Flexbox

如果粘性元素的父元素是弹性盒，则有两种情况需要检查：

粘性元素已align-self: auto设置（默认设置）；
粘性元素已align-self: stretch设置。
如果粘性元素已align-self: auto设置：
在这种情况下，的值align-self将计算为父项的align-items值。
因此，如果父级有align-items: normal（默认设置）或align-items: stretch设置，
则意味着粘性元素的高度将拉伸以填充整个可用空间。这将没有空间让粘性元素在父元素中滚动。

如果粘性元素已align-self: stretch设置：
在这种情况下，粘性元素会拉伸到父元素的高度，并且没有任何区域可以滚动。

如何使粘性元素在 Flexbox 中可滚动：
您可以简单地将属性的值设置align-self为align-self: flex-start。这会将粘性元素放在开头并且不会拉伸它。

到此这篇关于CSS中Position:Sticky不起作用的问题解决的文章就介绍到这了,更多相关CSS Position:Sticky不起作用内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章，希望大家以后多多支持酷瑞百科！

☆未收藏(0)

元素粘性