Question

这是GWT应用程序的DOM的一部分。 <span>表示箭头，下方的<div>表示正方形。代码重复，因此正确绘制： ARROW1 SQUARE1 ARROW2 SQUARE2

Square1具有缩放样式，因此它实际上大于Square2，并且应该与Arrow2重叠。这是问题：Square1应显示在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

将其添加到span元素：

display:block;

Answer 2

无论是绝对的还是相对的，添加位置都会起作用

Answer 3

它在Square1的DIV上添加了位置：绝对。

CSS：z-index无法在Google Chrome中使用SPAN

3 个答案: