CSS：z-index 在 Google Chrome 中的 SPAN 上不起作用答案

【问题标题】：CSS: z-index not working on SPAN in Google ChromeCSS：z-index 在 Google Chrome 中的 SPAN 上不起作用
【发布时间】：2012-11-11 23:55:43
【问题描述】：

这是 GWT 应用程序的 DOM 的一部分。 <span> 代表一个箭头，而正下方的 <div> 代表一个正方形。代码是重复的，所以这是正确的： ARROW1 SQUARE1 ARROW2 SQUARE2

Square1 具有缩放样式，因此它实际上比Square2 大，并且应该与 Arrow2 重叠。这就是问题所在：Square1 应该显示在Arrow2 上方（这就是为什么它的z-index:1 和Arrow2'z-index:0）。但是，反过来：Arrow2 显示在 Square1 上方。

这发生在谷歌浏览器中，但在 IE9 中可以正常工作。有任何想法吗？谢谢！

<div style="width:489PX;margin-left:auto;margin-right:auto;">
  <div style="cursor:pointer;">
    <div id="p379ehovd03-1" style="z-index=1;">
      /***** ARROW 1 BELOW *****/
      <span id="p21023d9223" style="z-index=1;"></span> 
      /***** SQUARE 1 BELOW *****/
      <div id="qu39rtgh93he-1" style="width:126PX;height:100PX;z-index=1;-moz-transform: scale(1.1, 1.1);-webkit-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);-ms-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1); -moz-transform-origin: center center;-webkit-transform-origin: center center;-o-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;z-index: 1">
        <p>adsfadsfasdfa</p>
      </div>
    </div>
  </div>
  <div style="cursor:pointer;z-index:0;">
    <div id="p379ehovd03-2" style="z-index:0;">
      /***** ARROW 2 BELOW *****/
      <span id="p2782bhsd29" style="display:block;z-index:0;"></span>
      /***** SQUARE 2 BELOW *****/
      <div id="qu39rtgh93he-2" style="width:126PX;height:100PX;"> 
        <p>adsfadsf</p>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

添加位置：相对于跨度标签，应该这样做（我认为）
所有具有 z-index 的元素都必须有一个位置，无论是绝对的、相对的等等。
实际上它在 Square1 的 DIV 上使用 position: absolute!!
太棒了！这只是需要记住的事情之一；）
另外，通常最好使用外部样式表而不是像上面那样使用内联样式（您可能已经知道这一点，只是想检查一下）

标签： gwt dom css styles

【解决方案1】：

它可以在 Square1 的 DIV 上添加 position: absolute。

【讨论】：

【解决方案2】：

无论是绝对位置还是相对位置，都可以添加位置

【讨论】：

【解决方案3】：

将此添加到 span 元素：

display:block;

【讨论】：