title: CSS: z-index not working on SPAN in Google Chrome
body: <p>This is part of the DOM of a GWT app. The <code>&lt;span&gt;</code> represents an arrow, and the <code>&lt;div&gt;</code> that is just below represents a square. The code is repeated, so this is drawing correctly:
  <strong>ARROW1 SQUARE1 ARROW2 SQUARE2</strong></p>
  
  <p><code>Square1</code> has a scaling style, so it is actually bigger than <code>Square2</code>, and should overlap Arrow2. This is the issue: <code>Square1</code> should be displayed OVER <code>Arrow2</code> (that is why its <code>z-index:1</code> and <code>Arrow2</code>' <code>z-index:0</code>). However, it is the other way round: <strong>Arrow2 is displayed OVER Square1</strong>.</p>
  
  <p>This is happening in Google Chrome, but in IE9 works fine. Any ideas? Thanks!</p>
  
  <pre><code>&lt;div style="width:489PX;margin-left:auto;margin-right:auto;"&gt;
    &lt;div style="cursor:pointer;"&gt;
      &lt;div id="p379ehovd03-1" style="z-index=1;"&gt;
        /***** ARROW 1 BELOW *****/
        &lt;span id="p21023d9223" style="z-index=1;"&gt;&lt;/span&gt; 
        /***** SQUARE 1 BELOW *****/
        &lt;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"&gt;
          &lt;p&gt;adsfadsfasdfa&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="cursor:pointer;z-index:0;"&gt;
      &lt;div id="p379ehovd03-2" style="z-index:0;"&gt;
        /***** ARROW 2 BELOW *****/
        &lt;span id="p2782bhsd29" style="display:block;z-index:0;"&gt;&lt;/span&gt;
        /***** SQUARE 2 BELOW *****/
        &lt;div id="qu39rtgh93he-2" style="width:126PX;height:100PX;"&gt; 
          &lt;p&gt;adsfadsf&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>