垂直时间轴年份sticky粘性定位失效问题求助

问题场景 #

你正在开发垂直时间轴，希望单个年份的长事件列表滚动时，年份标题在对应容器内固定，但添加的sticky样式未生效：

h2 
{
display:inline-block;
position:relative;
background:red;
margin-left:-150px;
position: -webkit-sticky;
position: sticky;
}

失效原因 #

1. 缺少偏移值：sticky定位必须指定top/bottom等偏移属性，否则无法触发粘性效果
2. 冗余属性冲突：代码中重复定义position属性，且inline-block布局可能干扰定位计算
3. 层级覆盖风险：未设置z-index，滚动时标题可能被下方内容遮挡

修复后的CSS #

修改h2样式，补充必要属性并清理冗余代码：

h2 {
  display: block; /* 改为block避免布局异常 */
  background: red;
  margin-left: -150px;
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* 与.content的padding-top对齐，确保标题固定在容器顶部 */
  z-index: 1; /* 防止被下方内容覆盖 */
}

同时确保.content元素未设置overflow: hidden/overflow: auto这类会破坏sticky定位的属性，现有代码中的.content { position: relative; }不会影响粘性效果。

完整可运行代码 #

* {
  box-sizing: border-box;
}
body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
}

/* 时间轴竖线 */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 200px;
  margin-left: -3px;
}

/* 事件容器 */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* 时间轴圆点 */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 200px;
}

/* 左侧容器箭头 */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* 右侧容器箭头 */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -16px;
}

/* 事件内容框 */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* 响应式适配 */
@media screen and (max-width: 600px) {
  .timeline::after {
  left: 31px;
  }
  
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  .left::after, .right::after {
  left: 15px;
  }
  
  .right {
  left: 0%;
  }
}

/* 修复后的年份标题样式 */
h2 {
  display: block;
  background: red;
  margin-left: -150px;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 1;
}

<div class="timeline">
  <div class="container right">
    <div class="content">
      <h2>2017</h2>
      <p>1. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2016</h2>
      <p>1. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
            <p>2. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.</p>
      <p>3. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum. orem ipsum dolor sit amet, quo orem ipsum dolor sit amet, quo </p>
      <p>4. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.orem ipsum dolor sit amet, quo </p>
      <p>4. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2015</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2012</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2011</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2007</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
</div>

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