为什么h2元素的position:sticky属性不生效？如何避免文档流中断

一、position:sticky不生效的核心原因 #

1. 元素为行内元素：你给.site-name设置了display: inline，sticky定位对行内元素无效，仅对块级、行内块级等符合块级上下文的元素生效。
2. 定位逻辑冲突：同级的.navigation-bar使用了fixed定位，脱离文档流，同时sticky元素没有和导航栏形成统一的吸附层级，滚动时没有触发吸附的参照基准。
3. 额外问题：fixed定位的导航栏本身脱离文档流，会自然遮挡下方处于正常文档流的内容，这是布局偏移的核心原因。

二、无需修改HTML结构的修复方案 #

直接替换原有对应CSS规则即可，全部改用sticky定位逻辑，彻底移除fixed避免脱离文档流：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bgcolor: #083EFD;
    --secondary-bgcolor: #3D68FF;
    --primarycolor: #E12836;
    --white-shade: #FFFFFB;
}

body {
    background-color: var(--bgcolor);
    color: var(--white-shade);
    font-family: 'Poppins', sans-serif;
}

/* 导航栏改为sticky，占正常文档流位置，不遮挡下方内容 */
.navigation-bar {
    background-color: var(--secondary-bgcolor);
    height: 1.875rem;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 修复sticky不生效：改为inline-block，调整位置和导航栏重叠 */
.site-name{
    color: var(--primarycolor);
    position: sticky;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block; /* 行内块级，支持sticky */
    margin-left: 0.5rem;
    z-index: 2;
    top: 0;
    line-height: 1.875rem; /* 垂直对齐导航栏 */
    margin-top: -1.875rem; /* 负边距实现和导航栏同层显示 */
}

/* 菜单图标也改为sticky，替换原有fixed */
svg {
    fill: var(--white-shade);
    position: sticky;
    right: 0.5rem;
    height: 1.5rem;
    top: 0.188rem;
    z-index: 2;
    margin-top: -1.687rem; /* 对齐导航栏高度 */
    display: block;
    margin-left: auto; /* 右对齐 */
}

.primary-headings {
    font-size: 1.25rem;
    font-weight: bold;
    /* 可选：给标题加顶部边距避免和导航太近 */
    margin-top: 1rem;
}

三、修复后效果 #

• 所有导航相关元素均为sticky定位，处于正常文档流中，不会遮挡下方内容，无需额外给body加padding适配导航高度
• 滚动页面时导航栏、站点名称、菜单图标会同步吸附在顶部，符合需求
• 完全没有修改原有HTML结构，仅调整CSS实现

内容的提问来源于stack exchange，提问作者Muhammad Bilal