CSS: z-index not working on SPAN in Google Chrome

Question

This is part of the DOM of a GWT app. The <span> represents an arrow, and the <div> that is just below represents a square. The code is repeated, so this is drawing correctly: ARROW1 SQUARE1 ARROW2 SQUARE2

Square1 has a scaling style, so it is actually bigger than Square2, and should overlap Arrow2. This is the issue: Square1 should be displayed OVER Arrow2 (that is why its z-index:1 and Arrow2' z-index:0). However, it is the other way round: Arrow2 is displayed OVER Square1.

This is happening in Google Chrome, but in IE9 works fine. Any ideas? Thanks!

<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>

Solution

Adding position will work whether is absolute or relative