jsfiddle 中的 z-index 示例不起作用，绝对令人困惑

Question

一切看起来都做对了。 'Loading Image' 应该具有较低的 z-index（位于图像后面）。为什么它不工作超出了我的范围，我看起来一切正常。

<div class='img_container' style="position:absolute;left:-100px;top:240px;z-index:1000;">
<div id='loader_container' style='position: absolute;text-align: center;top: 40%;width: 100%;'>
<div id='loader' style='background-color: #ffffff;border: 1px solid #6a6a6a;color: #000000;font-family: Tahoma,Helvetica,sans;font-size: 10px;margin: 0 auto;padding: 10px 0 16px;text-align: left;width: 135px;z-index: 1001;'><div align='center'>Loading image...</div></div></div>
<img style='z-index:1002;' id='imageToggleDef' src='http://cdn.instructables.com/FEB/Q2RO/H9G190RM/FEBQ2ROH9G190RM.LARGE.jpg' /></div>

Answer 1

首先，您图片上的 z-index 根本没有应用，因为 z-index 仅适用于定位元素。这意味着您必须提供图像 position: relative 或 position: absolute 或类似的东西。

其次，如果您将代码的格式设置得更好一点，就会更容易理解为什么 z-index 内容仍未按预期工作：

<div class='img_container' style="position:absolute;left:-100px;top:240px;z-index:1000;">
  <div id='loader_container' style='position: absolute;text-align: center;top: 40%;width: 100%;'>
    <div id='loader' style='background-color: #ffffff;border: 1px solid #6a6a6a;color: #000000;font-family: Tahoma,Helvetica,sans;font-size: 10px;margin: 0 auto;padding: 10px 0 16px;text-align: left;width: 135px;z-index: 1001;'>
      <div align='center'>Loading image...</div>
    </div>
  </div>
  <img style='z-index:1002;' id='imageToggleDef' src='http://cdn.instructables.com/FEB/Q2RO/H9G190RM/FEBQ2ROH9G190RM.LARGE.jpg' />
</div>

对于 z-index，您试图指定如果两个元素重叠，哪些元素在顶部，哪些在底部。您案例中的两个同时存在的元素不是图像和#loader，而是图像和#loader-container。所以你必须把较低的 z-index 给你的 #loader 容器。工作示例：https://jsfiddle.net/rruj0j3t/1/

如果您想了解更多 z-index 的工作原理，MDN 有一个非常深入的指南：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

jsfiddle 中的 z-index 示例不起作用，绝对令人困惑

z-index example on jsfiddle not working, absolutely baffeling

html

css

z-index