便签管理站点滚动时header标题无法固定在卡片上层问题求助

问题根源 #

z-index 属性仅对 position 值不为 static（默认值）的元素生效，你的代码存在两处核心问题：

1. .heading 元素未设置非 static 定位，你写的 z-index: 10 实际没有生效
2. 便签卡片 .note 未设置定位和层级，无法和 header 内的元素形成正确的层叠顺序

你提到的「分割线和标题放在同一个容器中」不是导致问题的诱因，不需要调整现有 HTML 结构即可实现需求，也不影响后续在 header 中添加图标。 #

修复方案 #

只需要修改几处CSS规则即可实现你要的效果：

1. 给 .heading 添加 position: relative，让 z-index 规则生效
2. 给 .note 添加 position: relative 和 z-index: 5，让卡片层级介于标题（z-index:10）和分割线（z-index:0）之间
3. 顺便修复你代码中媒体查询的笔误：宽度大于1000px时的选择器错写为.card，改为.note即可正常生效
4. 给notes容器添加上内边距，避免初始状态卡片被SVG分割线遮挡

修改后的完整CSS代码如下：

:root {
  --theme: #198754;
}
* {
  box-sizing: border-box;
}

body,
html {
  position: relative;
  padding: 0;
  margin: 0;
  height: 100%; /* 补充这行保证header的30%高度生效 */
  font-family: "Segoe UI", Roboto, sans-serif;
}

main {
  height: 100%;
}

header {
  position: sticky;
  top: 0px;
  height: 30%;
  width: 100%;
  background-color: white;
}

.heading {
  position: relative; /* 新增这行 */
  padding: 30px;
  z-index: 10; 
}

.custom-shape-divider-top-1633855194 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 0;
}

.custom-shape-divider-top-1633855194 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-1633855194 .shape-fill {
  fill: #ffffff;
}


h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.notes {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  padding-top: 120px; /* 新增这行避免初始状态卡片被SVG分割线遮挡 */
  background-color: var(--theme);
  justify-content: space-between;
}

.note {
  position: relative; /* 新增这行 */
  flex: 0 1 24%;
  box-shadow: #333333 0px 0px 5px;
  background-color: white;
  border-radius: 10px;
  z-index: 5; /* 调整z-index为5 */
  margin: 1rem .25em;
  padding: 15px;
  height: 150px;
}

@media screen and (max-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 100%;
  }
}

@media screen and (min-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 calc(50% - 1em);
    max-width: calc(50% -  1em);
  }
}

@media screen and (min-width: 1000px) {
  .note { /* 原代码错写为.card，已修正 */
    flex: 0 1 calc(25% - 1em);
    max-width: calc(25% - 1em);
  }
}

HTML代码无需任何修改，直接复用你现有结构即可，后续要加的图标直接放入.heading容器内就能继承最高层级，一直固定在最上层显示。

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