z-index doesn't work as I expected inside ion-slides

Question

I have two sliders using ion-slides component and I've created a footer with two buttons (navigation buttons). Until there all right.

But... I have a form inside one of the sliders, so when I focus on a input text element, the virtual keyboardopens and moves the footer up, standing it in front of the form.

I know the hide-on-keyboard-open class, but this isn't inmediate (you can see how the footer is placed in front of the form for a couple of seconds), so I thought of use z-index

So, when the footer is moved upward, it is hidden under the form. But I can't get it work.

Maybe somebody can help me with this trouble?

My intention is that the green block is hidden under the blue block when they have contact... I've created a codepen to show this problem: https://codepen.io/anon/pen/QEBxRK?editors=1111

(since you can not open a virtual keyboard on a desktop computer, you can resize the height of the page to see that the z-index does not work)

Regards!

Answer 1

The z-index needs to be set to the .footerTest's sibling, the <ion-slides options="sliderOptions" slider="slider"> element.

An option would be to move the .footerTest inside the slides.

Below sample shows how the z-index apply on elements and its children.

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>

But, if you omit the z-index on the dashed-box and use a negative value, as on the blue box, the blue goes beneath them all.

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