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