Gwt CSS:z-index在Google Chrome中不适用于SPAN

这是GWT应用程序DOM的一部分。

代表一个箭头，正下方的

代表一个正方形。代码重复，因此这是正确绘制的： 箭头1平方1箭头2平方2

Square1

具有缩放样式，因此它实际上比

Square2

大，并且应该与箭头2重叠。这就是问题所在：

Square1

应该显示在

Arrow2

上（这就是为什么它的

z-index:1

和

Arrow2

”

z-index:0

）。但是，情况正好相反：箭头2显示在正方形1上

这在谷歌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>

/*****下面的箭头1*****/
/*****下方第1方格*****/
adsfadsfasdfa

/*****下面的箭头2*****/
/*****下方2号广场*****/
adsfadsf

将其添加到span元素中：

display:block;

---

在平方1的DIV上添加position:absolute（绝对）是有效的。

添加position（绝对或相对）

添加position:relative（相对于span标记）应该可以（我认为）所有具有z索引的元素都必须在其上有一个位置，无论是绝对的、相对的，等等。实际上它与位置一起工作：绝对在平方1的DIV上！！伟大的这只是需要记住的事情之一；）此外，通常最好使用外部样式表，而不是像上面那样使用内联样式（您可能已经知道这一点，只是想检查一下）