Question

一切看起来都是正确完成的。 “加载图像”应该具有较低的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示例不起作用，绝对令人费解

1 个答案: