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

Question

这是GWT应用程序DOM的一部分。该<span>代表箭头，而<div>这仅仅是低于代表一个正方形。重复代码，因此可以正确绘制： ARROW1 SQUARE1 ARROW2 SQUARE2

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

这是在Google Chrome浏览器中发生的，但在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>

Answer 1

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