如何调整sticky图片div布局，实现内容从头部下方起始的吸顶效果

API 探路者

2026-11-2

问题根源

黄色内容块被挤到图片下方，本质是包裹图片的.sticky块在正常文档流里占了和图片等高的位置，把后面的#contain硬生生顶到了图片下面。要让内容块直接从黑色header底下开始排，同时保留你要的吸顶效果，根本不需要写复杂的JS，改两行CSS就行，新手也能直接套用。

两步调整方案

完全不用改动原有HTML结构，只调整CSS属性：

给.sticky的样式里加height: 0，直接让这个元素在文档流里不占任何纵向空间，后面的黄色内容块会自动上移，直接贴在100px高的黑色header下方，一步解决布局错位的问题。
把.sticky内部的图片改成绝对定位，避免图片反过来把0高度的父容器撑起来。给img补上position: absolute; left: 0; top: 0的定位规则就行。
原来.sticky的吸顶属性（position: sticky、top:0、z-index:-1）完全不用动，滚动逻辑和原来一模一样：页面刚打开时图片正常显示在header下方；向下滚动直到黑色header完全滑出视口，这个带图片的块会自动固定在视口顶部保持吸顶状态，因为z-index是-1，它永远在黄色内容块的最下面当背景，不会挡到文字。

调整后的样式参考

.header {
 width:100%;
 background-color:black;
 height:100px;
}
div.sticky {
  position: -webkit-sticky;
  position:sticky;
  width:100%;
  top: 0;
  z-index: -1;
  height: 0; /* 新增：取消文档流占位 */
}
div.sticky img {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}
#contain {   
    width: 50%;
    background-color: yellow;
    margin: auto;
    padding-left: 100px;
    padding-right: 100px;
    height: 1000px;
    clear:both;
}