微信小程序实现顶部固定并不遮挡下面元素

微信小程序实现页面顶部固定并避免遮挡内容，通常需要利用`position: fixed`和`z-index`这两个CSS属性。具体步骤如下：

1. 给需要固定的元素设置`position: fixed`，使其相对于浏览器窗口定位，而不是文档流中的普通元素。例如，在`<view>`标签中添加：

   <view class="top-fixed">
     <!-- 顶部导航栏内容 -->
   </view>

2. 在对应的样式表`.top-fixed`类中定义：

   .top-fixed {
     position: fixed;
     top: 0; /* 设置顶部距离 */
     width: 100%; /* 或者自适应屏幕宽度 */
     z-index: 999; /* 高于其他非fixed元素，保证显示在最上层 */
   }

3. 如果底部有需要正常滚动的内容，确保这部分内容不包含`position: relative`、`absolute`或`fixed`等影响布局的定位属性，以免与顶部固定元素冲突。

4. 使用`padding-top`来调整页面滚动区域，以便留出空间给顶部固定元素，例如：

   body {
     padding-top: 64px; /* 这里假设顶部高度为64px，对应实际的顶部固定元素高度 */
     overflow: auto;
   }