html - ionic 元素的 Z 索引

Question

我正在使用 Ionic Framework 开发移动/网络应用程序。我正在使用自定义 CSS header 和 ion-slide-box，自定义寻呼机但希望它与此自定义 header 重叠。

我尝试了所有与定位和 z-index 相关的方法，但我无法在 CSS 形状上显示寻呼机。

代码:

.bandeau
{
  position: relative;
  top: 0;
  height: 70px;
  width: 100%;
  background-color: #555555;
  margin-bottom: 80px;
}
.oval {
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 60% / 30px;
  position: absolute;
  height: 100px;
  width: 100%;
  top: 60%;
  background-color: #555555;
}
.slider-pager {
  display: block;
  background-color: white;
  position: absolute;
  z-index: 1000;
  top: -30px;
  height: 48px;
}
.slider-pager .slider-pager-page {
  position: relative;
  background-color: gray;
  border-radius: 100%;
  max-width: 72px;
  width: 48px;
  z-index: 10;
  height: 100%;
}
.pager-image {
  width: 100%;
}
.slider {
  height: 100%;
  background-color: white;
}
.ion-slide {
  background-color: white;
}

<div class="bandeau">
  <div class="oval"></div>
</div> <!-- TODO -->
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

<ion-view view-title="Catspads" align-title="left">
  <ion-slide-box show-pager="true">
    <ion-slide>
      <ion-content>

屏幕截图(此处寻呼机不会在标题上方):

Answer 1

我发现摆脱这种情况的唯一方法是使用 JS 以编程方式将寻呼机移动到较高的 HTML 级别，将其定位在 ion-content 标记之外。 z-index 按预期工作，但找不到更干净的解决方案。