如何在HTML中设置面包屑（breadcrumb）固定定位使其不随页面滚动

实现方案 #

方案1：使用position: sticky（推荐，无需额外调整下方内容间距） #

sticky定位不会脱离正常文档流，仅在滚动到对应触发位置时自动固定，适配成本更低：
你可以在全局样式文件，或者_layout.cshtml的<head>标签内加入以下CSS代码：

.c-subheader {
  position: sticky;
  top: 0; /* 如果页面顶部有固定导航栏，把这个值修改为导航栏的实际高度，例如top: 56px */
  z-index: 1020; /* 保证层级足够，不会被页面其他普通元素覆盖 */
  background-color: #fff; /* 替换为你页面面包屑区域的实际背景色，避免滚动时下方内容透上来 */
}

方案2：使用position: fixed #

如果需要完全脱离文档流固定在页面顶部，可以使用该方案，但需要额外给主体内容加顶部内边距，避免内容被面包屑遮挡：
首先添加面包屑的固定样式：

.c-subheader {
  position: fixed;
  top: 0; /* 有顶部导航时对应调整数值 */
  left: 0;
  right: 0;
  z-index: 1020;
  background-color: #fff; /* 替换为实际背景色 */
}

然后给下方主体内容区加顶部内边距，数值需要和面包屑渲染后的实际高度一致：

.c-main {
  padding-top: 50px; /* 按你实际面包屑的高度调整数值 */
}

补充说明 #

从你使用的c-subheader、c-body类名判断，你的项目应该是使用CoreUI框架，框架本身已经内置了固定子头部的样式类，你可以直接给.c-subheader元素添加c-subheader-fixed类，无需额外写自定义CSS即可实现效果。

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