CSS-Can'；我没有固定导航栏

我正在用IONIC2框架开发一个应用程序，现在我需要创建一个固定的导航条，粘贴在屏幕顶部；然而，我并没有幸运地完成这项工作

到目前为止，它在铬合金上工作得非常完美；但是，当我在设备（Safari）上运行它时，整个视图都可以滚动

我迄今为止的执行情况：

HTML:

---

使用上述实现，当我在设备（iOS）上上下滚动时，整个页面会上下滚动，导航栏不会粘在顶部。

为什么不尝试使用

离子工具栏呢？根据：

工具栏是位于内容上方或下方的通用栏。
与导航栏不同，工具栏可用作副标题打开工具栏时
如果将工具栏放置在
或
中，工具栏将保持不变
固定在各自的位置

还要注意

当放置在
中时，工具栏将随
内容

因此，与其尝试将代码放入
离子内容
，不如尝试将其放入
离子工具栏
，但是在
ion标题中包含
ion工具栏
，在
ion内容中包含not，
ion内容
，
我认为不需要为.top的任何子级设置position属性，因为它们继承了它的样式。这是真的，但我做了很多尝试，以上是最新版本。谢谢你的观点，使用
ion工具栏
对我来说并不方便，因为我正在设计的新标题是完全定制的，它包含背景图像、自定义高度……所以我需要知道爱奥尼亚如何仅使用CSS固定其导航栏
        <ion-content id="contentPadding" class="outlet">
        <div class="top">
        <div class="imagebk" [ngStyle]="{'background-image': 'url('+outlet.mainPhoto?.url+')'}"><div class="bk"></div></div>
        <div class="fixedTitle">
          <div class="outletName">{{outlet.resName | uppercase}}</div>
        </div>
        <ion-row id="rowPadding">
          <ion-col id="overviewTab" width-50>
          <div>TAB 1</div>
          </ion-col>

          <ion-col id="menuTab" (click)="showModal(outlet)" width-50>
          <div>TAB 2</div>
          </ion-col>
        </ion-row>
        </div>
       .....
     <div class="secondDiv"></div>
     </ion-content>

   .top{
    position: fixed !important;
    top:0;
     }

    .fixedTitle{
      position: fixed;
      width: 100%;
      text-align: center;
      margin-top: 13%;
      left: 50%;
      z-index: 101;
      transform: translateX(-50%);
     }

     #rowPadding{
    padding:50% 0 0vh 0;
    position: fixed;
   transform: translateX(0px);
   z-index: 5;
    }