position:fixed致flex布局失效及sticky定位问题求助

需求与问题 #

• 目标：页面滚动时，.word 和 .line 元素固定在视口顶部，且.line始终位于.word下方
• 遇到的问题：
  1. 单独给.line设置position:sticky后，它会跳至.word上方，无法保持在.word下方的固定位置
  2. 使用position:sticky初始滚动时文本存在晃动；改用position:fixed则导致.warning（红色字体）与.transcription文本水平重叠，无法维持两侧对立的布局

解决思路 #

将.word和.line包裹在同一个容器内，对容器应用粘性/固定定位，确保两个元素的相对位置始终不变。同时通过样式优化解决布局对齐和晃动问题。

修改后的代码 #

HTML #

<!DOCTYPE html>
<html>
<body>
  <div class="sticky-header">
    <div class="word">
      <span>Word</span>
      <div class="word-details">
        <div class="transcription">/ transcription /</div>
        <div class="warning">COMMENT</div>
      </div>
    </div>
    <hr class="line">
  </div>
  
  <ol class="meaning">
    <li class="meaning-word">Meaning1</li>
      <ul class="sentences">
        <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
        <li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li>
      </ul>
    <li class="meaning-word">Meaning2</li>
      <ul class="sentences">
        <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      </ul>
  </ol>
</body>
</html>

CSS #

/* 包裹头部元素的容器，实现粘性固定 */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}

.word {                                  
  padding: 1vw 3vw 2% 3vw;
}

.word-details {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.transcription {
  font-weight: normal;
}

.warning {
  color: red;
  margin-left: auto;
}

.line {
  border-top: 2px solid #fdb239;
  /* 与.word的内边距对齐，保持视觉一致 */
  margin: 0 3vw;
}

.meaning {
  list-style-type: none;
  counter-reset: item;
  hyphens: auto;
  font-size: calc(0.7em + 1.5vw);
}

.meaning > li {
  position: relative;
}

.meaning > li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  top: 0;
  text-align: center;
  margin-left: calc(-0.7em - 2.5vw);          
}

.meaning-word {
  margin-top: 50px;
}

.sentences {
  list-style-type: none;
  padding-left: 0;
  font-size: calc(0.7em + 1.5vw);
  margin-top: 30px;                   
}

.sentences > li.sentence-ru {
  margin-top: 15px;                   
}

替代方案（使用position:fixed） #

如果偏好position:fixed，只需修改.sticky-header的样式：

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: white;
  box-sizing: border-box;
}

同时给.meaning添加margin-top（值等于.sticky-header的实际高度），避免内容被固定头部遮挡。

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