z-index 在 ion-slides 中没有像我预期的那样工作

Question

我有两个使用 ion-slides 组件的滑块，我创建了一个带有两个按钮（导航按钮）的页脚。直到一切都好。

但是...我在其中一个滑块中有一个表单，所以当我关注 input text 元素时，virtual keyboard 打开并将页脚向上移动，使其位于表格。

我知道 hide-on-keyboard-open class，但这不是直接的（您可以在几秒钟内看到页脚是如何放置在表格前面的），所以我想到使用 z-index

所以，当footer向上移动时，它隐藏在窗体下面。但我无法让它工作。

也许有人可以帮我解决这个问题？

我的意图是当他们接触时绿色块隐藏在蓝色块下面......我创建了一个代码笔来显示这个问题：https://codepen.io/anon/pen/QEBxRK?editors=1111

（由于台式电脑无法打开虚拟键盘，可以调整页面高度，看到z-index不起作用）

此致！

Answer 1

需要将 z-index 设置为 .footerTest 的同级元素，即 <ion-slides options="sliderOptions" slider="slider"> 元素。

一个选项是将 .footerTest 移到幻灯片中。

下面的示例显示了 z-index 如何应用于元素及其子元素。

来源：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>

但是，如果您省略 dashed-box 上的 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;
}
.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>

z-index 在 ion-slides 中没有像我预期的那样工作

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

css

z-index

slider

swiper

ionic-framework