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

这是GWT应用程序DOM的一部分。 <span>表示一个箭头，而正下方的<div>表示一个正方形。重复代码，因此可以正确绘制:
ARROW1 SQUARE1 ARROW2 SQUARE2
Square1具有缩放样式，因此它实际上比Square2大，并且应与Arrow2重叠。这就是问题所在:Square1应该显示在Arrow2之上(这就是为什么z-index:1和Arrow2'z-index:0的原因)。但是，反之亦然:在Square1 上方显示 Arrow2。

这是在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>

最佳答案

绝对或相对位置都可以添加位置

关于gwt - CSS:z-index在Google Chrome中的SPAN上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13532105/