CSS响应式布局中固定导航遮挡图片及@media使用问题

• 导航栏设置了position: fixed，完全脱离正常文档流，不会在布局里为自身高度预留空间，和导航栏同级的.carousel横幅容器会直接从视口顶部开始渲染，自然会被叠在上方的固定导航挡住上半部分。
• 之前尝试用position: relative配合top属性调整没生效，通常是两类问题：一是偏移量没有和导航栏实际高度匹配，二是样式直接加在了img标签上而不是父容器.carousel上，只挪动了图片本身，没有修正整体布局的占位位置。

横幅区域适配占位 #

不要靠相对定位硬挪元素，直接给.carousel容器增加和导航栏高度匹配的上内边距，把图片整体推到导航栏下方位置，这种方式不会破坏原有文档流：

.carousel {
  /* 根据实际调试的导航栏高度调整数值，手机端场景下当前导航栏因为logo字号较大，通常需要70-90px的占位高度 */
  padding-top: 80px;
}

这种写法比相对定位偏移更稳定：相对定位不会改变元素在文档流中原本占据的空间，硬加top偏移会在导航栏下方留下一块无意义的空白占位，滚动时容易出现布局错位。

@media查询规则的逻辑说明 #

你当前写的@media screen and (min-width: 800px)的实际运行逻辑是：当设备屏幕宽度≥800px时，查询块内部的CSS规则才会生效；宽度小于800px的手机、小尺寸平板视口下，会直接应用媒体查询块外部的默认CSS规则。
因为在桌面端（≥800px视口）你设置了导航栏为透明背景，设计上就是要让横幅图片顶满屏幕顶部的，这时候之前给移动端加的上内边距就会变成突兀的灰色空白，需要在媒体查询块里补上对应重置规则：

@media screen and (min-width: 800px) {
  nav {
    background: transparent;
  }
  .nav-center {
    width: 90vw;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
  /* 桌面端不需要预留导航栏占位，清零上内边距 */
  .carousel {
    padding-top: 0;
  }
}

冗余代码清理 #

你当前给carousel img设置的background-size、-moz-background-size、background-position属于无效代码：这三个属性是控制元素背景图渲染的，对<img>标签本身加载的真实图片没有作用，可以直接删除。

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