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>
スクリーンショット(ここではページャがヘッダーの上ではありません):
あなたのhtmlスニペットで多くの終了タグが見つからないようです... –
Zインデックスのすべての要素とその親要素に 'position'を与えましたか(変更が必要ない場合は' position:relative') http://stackoverflow.com/a/7493730/444255 –
はい、私は角度とイオンを介して行われているので、生成されたコードを貼り付けることはできませんので、私はちょうどhtmlのグローバルアーキテクチャを与えています。より多くのCSS問題があります。 –