Z-indexing on ionic elements

我正在開發一個帶有Ionic Framework的移動/ Web應用程序。我使用自定義CSS標題和ion-slide-box，自定義尋呼機，但希望它與此自定義標題重疊。Z-indexing on ionic elements

我嘗試了一切與定位和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>

截圖（這裏尋呼機不會超過頭）：

來源

2016-04-12 Maxime B

您似乎錯過了很多關閉標籤在您的html代碼片段中...... –

您是否對所有z索引元素及其父元素（'position：relative'，如果不需要更改）給出一些「位置」 http://stackoverflow.com/a/7493730/444255 –

是的，我不能粘貼生成的代碼，因爲它是通過角和離子完成的，所以我只是給了html的全局體系結構。這更像一個CSS問題imo。 –

我發現的唯一途徑擺脫這個是編程式移動pag呃將JS用於較高的HTML級別，將其定位在ion-content標記之外。 z-index按預期工作，但無法找到一個更清潔的解決方案。

來源

2016-05-27 16:04:31

Z-indexing on ionic elements

回答

相關問題