İ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
html snippet'inizde birçok kapanış etiketini kaçırıyorsunuz ... –
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 –
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. –