0
Ich entwickle eine mobile/Web App mit Ionic Framework. Ich benutze einen benutzerdefinierten CSS-Header und eine ion-slide-box, angepasst den Pager, aber es soll mit diesem benutzerdefinierten Header überlappen.Z-Indizierung auf ionischen Elementen
Ich habe alles mit Positionierung und z-index versucht, aber ich kann nicht den Pager über die CSS-Form zeigen.
Der Code:
.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>Screenshot (hier der Pager nicht über den Header sein):
Sie scheinen eine Menge von schließenden Tags in Ihrem HTML-Snippet zu verpassen ... –
Haben Sie allen z-indizierten Elementen UND ihren Elternelementen eine Position gegeben ('position: relative', wenn keine Änderung gewünscht wurde) ➝ http://StackOverflow.com/a/7493730/444255 –
Ja, ich kann den generierten Code nicht einfügen, da es durch eckige und ionische erfolgt, so gebe ich nur die globale Architektur des HTML. Es ist mehr ein CSS-Problem imo. –