前提导航栏已经采用固定定位布局

如：

.search-index {     display: flex;     /* 固定定位跟父级没有关系 它以屏幕为准 */     position: fixed;     top: 0;     left: 50%;     /* 固定的盒子应该有宽度 */     -webkit-transform: translateX(-50%);     transform: translateX(-50%);     width: 100%;     min-width: 320px;     max-width: 540px;     height: 44px;     /* pink; */     background-color: #F6F6F6;     border-top: 1px solid #ccc;     border-bottom: 1px solid #ccc; }

 

 

方法一：banner（focus）背景图父盒子应该加上一个padding-top值

.focus {
    padding-top: 44px;
}

.focus img {
    width: 100%;
}

html代码如下：

<!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

方法二：banner（focus）背景图父盒子设置宽和高

html代码如下：

 <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>

css如下：

.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}