Z-Index funktioniert nicht so wie ich es erwartet habe innerhalb von Ionen-Dias

Question

Ich habe zwei Schieberegler mit ion-slides Komponente und ich habe eine Fußzeile mit zwei Tasten (Navigationstasten) erstellt. Bis dahin alles in Ordnung.

Aber ... Ich habe ein Formular in einem der Schieberegler, so, wenn ich auf ein input text Element konzentrieren, öffnet virtual keyboard und bewegt die Fußzeile nach oben, steht es vor dem Formular.

Ich kenne die hide-on-keyboard-open Klasse, aber diese inmediate nicht (man kann sehen, wie die Fußzeile vor der Form für ein paar Sekunden platziert ist), so dass ich dachte Nutzungs z-index

Also, wenn Die footer wird nach oben bewegt, sie ist unter dem Formular versteckt. Aber ich kann es nicht funktionieren.

Vielleicht kann mir jemand mit diesem Problem helfen?

Meine Absicht ist es, dass der grüne Block unter dem blauen Block verborgen ist, wenn sie Kontakt haben ... Ich habe eine codepen erstellt haben, dieses Problem zu zeigen: https://codepen.io/anon/pen/QEBxRK?editors=1111

(da Sie nicht eine virtuelle Tastatur öffnen kann auf ein Desktop-Computer, können Sie die Höhe der Seite ändern, um zu sehen, dass die z-index nicht funktioniert)

Grüße!

Answer 1

Die z-index muss auf das .footerTest Geschwister, das <ion-slides options="sliderOptions" slider="slider"> Element, eingestellt werden.

Eine Option wäre, die .footerTest innerhalb der Folien zu verschieben.

Das folgende Beispiel zeigt, wie die z-index auf Elemente und seine untergeordneten Elemente angewendet werden.

Src: https://developer.mozilla.org/en/docs/Web/CSS/z-index

.dashed-box { 
 
    position: relative; 
 
    z-index: 3; 
 
    border: dashed; 
 
    height: 8em; 
 
    margin-bottom: 1em; 
 
    margin-top: 2em; 
 
} 
 
.gold-box { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: gold; 
 
    width: 65%; 
 
    left: 60px; 
 
    height: 7em; 
 
    top: 3em; 
 
} 
 
.green-box { 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: lightgreen; 
 
    width: 20%; 
 
    left: 65%; 
 
    top: -25px; 
 
    height: 8em; 
 
    opacity: 0.9; 
 
} 
 
.red-box { 
 
    position: relative; 
 
    z-index: 0; 
 
    background: red; 
 
    height: 8em; 
 
    margin-bottom: 1em; 
 
    margin-top: -4em; 
 
    text-align: right; 
 
}

<div class="dashed-box">Dashed box 
 
    <span class="gold-box">Gold box</span> 
 
    <span class="green-box">Green box</span> 
 
</div> 
 
<div class="red-box">Red box</div>

Aber, wenn Sie die z-index auf dem dashed-box und verwenden Sie einen negativen Wert, wie auf dem blauen Feld nicht angeben, geht die blaue unter ihnen allen.

.dashed-box { 
 
    position: relative; 
 
    /* z-index: 3; */ 
 
    border: dashed; 
 
    height: 8em; 
 
    margin-bottom: 1em; 
 
    margin-top: 2em; 
 
} 
 
.gold-box { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: gold; 
 
    width: 65%; 
 
    left: 60px; 
 
    height: 7em; 
 
    top: 3em; 
 
} 
 
.green-box { 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: lightgreen; 
 
    width: 20%; 
 
    left: 65%; 
 
    top: -25px; 
 
    height: 8em; 
 
    opacity: 0.9; 
 
} 
 
.blue-box { 
 
    position: absolute; 
 
    z-index: -1; 
 
    background: lightblue; 
 
    width: 20%; 
 
    left: 25%; 
 
    top: -25px; 
 
    height: 18em; 
 
    opacity: 0.9; 
 
} 
 
.red-box { 
 
    position: relative; 
 
    z-index: 0; 
 
    background: red; 
 
    height: 8em; 
 
    margin-bottom: 1em; 
 
    margin-top: -4em; 
 
    text-align: right; 
 
}

<div class="dashed-box">Dashed box 
 
    <span class="gold-box">Gold box</span> 
 
    <span class="green-box">Green box</span> 
 
    <span class="blue-box">Blue box</span> 
 
</div> 
 
<div class="red-box">Red box</div>