2016-04-12 15 views
0

私はIonic Frameworkを使用してモバイル/ Webアプリケーションを開発しています。カスタムCSSヘッダーとion-slide-boxを使用していますが、ページャはカスタマイズされていますが、このカスタムヘッダーと重複しています。イオン要素のZインデックス付け

私は位置決めと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>

スクリーンショット(ここではページャがヘッダーの上ではありません):
Here the pager won't be over the header.

+0

あなたのhtmlスニペットで多くの終了タグが見つからないようです... –

+0

Zインデックスのすべての要素とその親要素に 'position'を与えましたか(変更が必要ない場合は' position:relative') http://stackoverflow.com/a/7493730/444255 –

+0

はい、私は角度とイオンを介して行われているので、生成されたコードを貼り付けることはできませんので、私はちょうどhtmlのグローバルアーキテクチャを与えています。より多くのCSS問題があります。 –

答えて

0

私が見つけた唯一の方法これを取り除くには、プログラム的にページを移動することでしたJSを上部HTMLレベルに使用して、ion-contentタグの位置を決めます。 z-indexは意図したとおりに動作しましたが、これに対してよりクリーンなソリューションは見つかりませんでした。