Question

在这里，我有一个模态的小例子，并在按钮上添加了z-index：1000。

  <button type="button" class="btn btn-info btn-lg" style="z-index: 1000" data-toggle="modal" data-target="#myModal">Open Modal</button>

为什么按钮不出现在模式上方？还是我完全误解了z-index属性？

https://www.w3schools.com/code/tryit.asp?filename=G22NNMWCE9PS

P.S。单击“运行”以显示代码结果。点击“打开模式”以打开模式

Answer 1

尝试

<button type="button" class="btn btn-info btn-lg" style="z-index: 1051;position: relative;" data-toggle="modal" data-target="#myModal">Open Modal</button>

该模型的Z索引：1050，因此按钮必须具有较高的Z索引。默认情况下，按钮具有position: static;。 Z-index仅适用于定位元素（position：absolute，position：relative或position：fixed）。

Answer 2

我认为Bootstrap已将模式放在z-index: 1000上方（我不知道确切的位置），并且您想使用z-index: 2000;做些什么。该按钮也必须位于position: relative

中

Answer 3

Z索引需要定位。将val successes = originalSet .fold(emptySet<Success>()) { acc, item -> item.fold({ acc }, { acc + it }) }添加到按钮。您还需要增加Option的值，因为模态具有position: relative;，并且按钮需要更高的值才能出现在模态层上方。

Answer 4

因此，这里有2个问题：

模态的z索引为1050，您使用的是1000。
即使您使用，说：1051，它将无法正常工作，因为您需要一个定位框[*] （即position CSS属性应该不是 static。）。在这种情况下，您可以将position: relative;与与z-index: 1050;

以下是更新的JSBin供参考：

https://jsbin.com/pozilemefa/edit?html,output

[*] MDN上的Z-index：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index。它说：

z-index CSS属性设置已定位元素的z顺序，然后它的后代或弹性物品。重叠元素较大 z-index覆盖那些较小的索引

旁注：我建议在W3schools上使用MDN，作为您的网络参考。（我个人使用了名为“隐藏W3schools”的Chrome扩展程序来隐藏所有来自Google搜索的结果。）

Z索引不会使元素出现在其他元素之上

4 个答案: