前提导航栏已经采用固定定位布局
如：
.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%;
}