如何让内容置于内盒阴影下方？滚动时阴影需显示在文本上方

要实现顶部固定阴影、滚动内容从阴影下方穿过的效果，你可以通过伪元素+粘性定位来实现，具体代码调整如下：

HTML 结构（保持不变） #

<div class="container">
  <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS 调整代码 #

.container {
  position: relative;
  /* 给容器设置固定高度，触发滚动 */
  height: 200px;
  overflow-y: auto;
  /* 移除原有的内阴影 */
}

/* 通过伪元素创建顶部固定阴影层 */
.container::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  /* 用渐变模拟自然的阴影过渡，可根据需求调整颜色和高度 */
  background: linear-gradient(to bottom, rgba(128,128,128,0.5), transparent);
  /* 确保阴影层在内容上方 */
  z-index: 1;
}

.item {
  /* 让内容在阴影层下方 */
  position: relative;
  z-index: 0;
  margin: 10px 0;
}

关键说明 #

• position: sticky 让伪元素固定在容器顶部，不会随内容滚动
• 渐变背景比单纯的内阴影更自然，能模拟内容从阴影下"钻出来"的效果
• 通过 z-index 控制层级，确保阴影始终在内容上方

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