title: horizontal CSS transition with fixed elements?
body: <p>I'm working on a multidevice web page, i want to make a CSS transition of a div (.carrousel) witch contains 3 other div (.bloc1 to 3) positionned horizontally using float left
  First, only div 2 and 3 are shown (negatif left on .carrousel and overflow hidden on the container .global)
  A clic on the link 'Show blocs {1, 2}' moves the .carousel to right and shows these blocs
  To ensure the transition happens smoothly i've adopted the HTML structure below.
  The problem is that the fixed elements are'nt positionned correctly in Chrome, IE8, Android 4.03 et 3.02
  But under Firefox 15.0, IE9 and also IE7! things are working well...
  Any suggestion on changing the HTML structure is welcome as the transition effect remain untouched... But i don't want to use some hacks or specific CSS by device</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /&gt;
      &lt;style type="text/css"&gt;
  
          * { margin:0; padding:0; }
          a img { border:none; }
          body { font-family:Tahoma; font-size:12px; }
          p { margin:10px 0; }
  
          .global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; }
  
          .carrousel { width:1660px; overflow:hidden; position:relative; top:0;
              -webkit-transition: left .2s ease-in-out;
              -moz-transition: left .2s ease-in-out;
              -ms-transition: left .2s ease-in-out;
              -o-transition: left .2s ease-in-out;
              transition: left .2s ease-in-out; }
  
          .bloc { float:left; padding:5px; margin:5px; text-aligh:center; }               
  
          .bloc1 { width:700px; height:400px; background-color:#F00; }
  
          .bloc2 { width:200px; height:300px; background-color:#999; }
          .nav { position:fixed; z-index:2; background-color:#F90; width:200px; }
          .nav a { display:block; margin:10px 0; }
  
  
          .bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; }
          .header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; }
          .list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; }
  
          .carrousel.showblocs23 { left:-720px; }
  
          .carrousel.showblocs12 { left:0; }
          .carrousel.showblocs12 .header { position:relative; }           
  
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;blocr&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="global"&gt;
  
          &lt;div class="carrousel showblocs23"&gt;  
  
              &lt;div class="bloc bloc1"&gt;
              bloc 1              
              &lt;/div&gt;
  
              &lt;div class="bloc bloc2"&gt;
              bloc 2
                  &lt;div class="nav"&gt;
                  fixed nav&lt;br /&gt;
                      &lt;a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;"&gt;
                      Show blocs {1, 2}
                      &lt;/a&gt;                                
                      &lt;a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;"&gt;
                      Show blocs {2, 3}
                      &lt;/a&gt;
                  &lt;/div&gt;                
              &lt;/div&gt;
  
              &lt;div class="bloc bloc3"&gt;
  
              bloc 3
  
                  &lt;div class="header"&gt;
                      bloc 3 header fixed
                  &lt;/div&gt;
  
                  &lt;div class="list"&gt;
                      bloc 3 long list
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /carrousel --&gt; 
  
      &lt;/div&gt;&lt;!-- /global --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>