輸入文字 <h1> 標簽在離子含量元素中不可見

Question

我正在嘗試使用ionic制作單頁應用程序，但是為什么我看不到競爭 tag.my 爭辯文本被隱藏的原因是什么？

代碼 http://codepen.io/anon/pen/pvYdNM

<ion-view>
      <ion-header-bar class=" bar bar-positive">
          <h1 class="title">Title!</h1>                 
      </ion-header-bar>
      <ion-content>
          <h1>contend</h1>
      </ion-content>
      <ion-footer-bar class=" bar bar-footer bar-positive">
           <h1 class="title">Fotter!</h1>
      </ion-footer-bar>
  </ion-view>

答：

<ion-view>
      <ion-header-bar class=" bar bar-positive test">
          <h1 class="title">Title!</h1>    
      </ion-header-bar>
      <ion-content>
          <h1>contend</h1>
      </ion-content>
      <ion-footer-bar class=" bar bar-footer bar-positive">
           <h1 class="title">Fotter!</h1>
      </ion-footer-bar>
  </ion-view>

<style>

    .test {
     border: 1px solid red;
     position: relative!important;
    }
    </style>

Answer 1

.bar設置為position: absolute因此將<ion-header-bar>從正常流中移除。 這導致<ion-content>移動到窗口頂部並被<ion-header-bar>遮蓋。

Answer 2

內容實際上在頁面內部。 您的CSS需要修復。 只是證明它存在： 小提琴

<h1 align="center" style="padding-top:150px">contend</h1>