如何禁用Blogger平台上的可折叠粘性头部？

问题原因 #

你仅将position属性从fixed改为relative，但原样式规则中的left/right/top等定位属性仍然生效，relative定位的元素会基于自身原始位置按照这些属性产生偏移。加上Blogger首页和文章页的头部父容器布局规则不同，就会出现首页正常、文章页头部错位的问题。

解决方案 #

直接使用以下CSS规则全局禁用粘性头部效果，优先级足够覆盖主题默认和JS动态注入的样式：

.centered-top-container.sticky {
    position: static !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    z-index: unset !important;
    transform: none !important;
}

static是HTML元素的默认定位属性，会完全忽略定位偏移设置，让头部回归正常文档流，不会出现错位问题。

如果需要针对不同页面差异化设置，可以调用Blogger默认的页面body类做规则限定：

• 仅首页禁用粘性头部：在选择器前加.home，即.home .centered-top-container.sticky
• 仅文章页禁用粘性头部：在选择器前加.item-view，即.item-view .centered-top-container.sticky

内容的提问来源于stack exchange，提问作者Comercial Pacific RyN