html - Z-index 不会让一个元素出现在其他元素之上

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

附言单击“运行”以显示代码的结果。点击“打开模态”打开模态

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-index: 1050，所以按钮必须有更高的 z-index。 默认情况下，按钮具有 position: static;。 Z-index 仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。