2016-04-12 21 views
0

İyonik Çerçeve ile bir mobil/web uygulaması geliştiriyorum. Özel bir CSS başlığı ve ion-slide-box kullanıyorum, çağrı cihazını özelleştirdim ancak bu özel başlık ile çakışmasını istiyorum.İyonik elemanlar üzerinde Z-indeksleme

Konumlandırma ve z-index ile her şeyi denedim, ancak çağrıyı CSS biçiminde göstermeyi başaramıyorum.

Kodu:

.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>

görüntüsü (burada çağrı cihazı başlığı üzerinde olmayacak): buldum
Here the pager won't be over the header.

+0

html snippet'inizde birçok kapanış etiketini kaçırıyorsunuz ... –

+0

Tüm z dizinli öğelere VE kendi ana öğelerine "konum" verdiniz mi ("konum: göreli", değişiklik yapılmadıysa) ➝ http://stackoverflow.com/a/7493730/444255 –

+0

Evet, oluşturulan kodu açısal ve iyonik olarak yapıldığı gibi yapıştıramıyorum, bu yüzden html'nin global mimarisini veriyorum. Daha çok bir CSS sorunu imo. –

cevap

0

tek yol Bu kurtulmak için programın pag hareket etmekti JS'yi bir üst HTML seviyesine kullanarak ion-content etiketinden dışarı konumlandırın. z-index amaçlandığı gibi çalıştı, ancak bunun için daha temiz bir çözüm bulamadı.