CSS定位div出现异常结果：图片margin失效问题排查

为什么#images的margin失效，图片跑到顶部？ #

这俩问题其实是同一个原因导致的：

• position: fixed 让图片脱离了正常文档流：当你给图片设置position: fixed后，这个元素就不再属于页面的正常布局流了——它不会占据父容器#images的空间，定位也变成了相对于浏览器视口（就是你看到的整个浏览器窗口），而不是父容器。
• #images容器高度塌陷：因为里面的图片跑出去了，#images没有了可支撑的内容，高度直接变成了0。这时候你设置的margin-top: 10vh虽然存在，但因为容器本身没有高度，肉眼就看不出效果；而fixed的图片直接定位在视口顶部，还把你的渐变元素给挤下去了。

怎么把#images（或图片）放到文本下方10vh？ #

分两种场景给你解决方案，你可以根据需求选：

场景1：希望图片固定在视口，但#images容器占位在文本下方（避免页面滚动时内容被图片遮挡）

这种情况需要让#images在文档流里占据空间，同时调整fixed图片的定位：

#images {
  margin-top: 10vh;
  /* 设置和图片高度一致的最小高度，让容器在文档流里占位 */
  min-height: 80vh; 
}

#images img {
  position: fixed;
  /* 让图片顶部距离视口顶部10vh，和容器的位置对齐 */
  top: 10vh; 
  left: 0;
  width: 100%;
  height: 80vh;
  /* 如果渐变被图片挡住，给图片加个更低的z-index */
  z-index: 5;
}

/* 给渐变元素加高z-index，确保它在图片上方 */
.gradient {
  position: fixed;
  z-index: 10;
  /* 你的渐变样式 */
}

场景2：不需要图片固定，只是希望它显示在文本下方10vh

这种情况最简单，直接去掉图片的position: fixed，让它回到正常文档流里：

#images {
  margin-top: 10vh;
}

#images img {
  /* 删掉position: fixed */
  width: 100%;
  height: 80vh;
}

这样调整后，#images的margin-top: 10vh就能正常生效，把整个容器（包括里面的图片）推到文本下方10vh的位置了。

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