html代码|顶部固定浮动横幅

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!--自适应代码-->

<header class="zshaowl">
    <div class="zshao vip">
    <!-- 内容放下面 -->
    <button type="button">按钮</button>
      <button type="button">按钮</button>
 <button type="button">按钮</button>
 <!-- 内容放上面面 -->
</header>

<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
  <img src="http://img.zshao.vip/2021/04/20/3ec1f2ecb2df1.jpg">
</div>
<style type="text/css">
.zshaowl {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;/*  模块大小 */
  background-color: #fff ;/* 模块底色 */ opacity: 0.8; /* 透明效果设置 */
  z-index: 10;
}
.zshao.vip {
  height: 30px; padding: 7px 0;/*  模块大小 */
    text-align: center;/*  居中 */
}

.background img {/*可以删除*/
  width: 100%;/*height: 100%;*/
}
</style>

跟随屏幕移动