Question

我正在尝试使用离子进行单页应用。但是为什么我无法在标签中看到竞争。我的竞争文字隐藏了为什么？

<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 需要修复。只是证明它在那里：Fiddle

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

<h1>标签中的文字在离子内容元素</h1>中不可见

2 个答案: