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

Question

一切看起来都是正确的。 “正在加载图像”应该具有较低的 z-index(位于图像后面)。为什么它不起作用，这超出了我的范围，但在我看来一切正常。

试一试:https://jsfiddle.net/yjwxdmw3/

<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