title: z-index stacking issue with Chrome and Google Maps
body: <p>I'm working on the beta of a website that has a "docking" header. When the visitor scrolls down the page the header locks in place and the page content slides under the header.</p>
  
  <p>This works fine on content pages like this: <a href="http://www.aride.org.nz/longest-day/how-to-do-the-longest-day-ride/" rel="nofollow">http://www.aride.org.nz/longest-day/how-to-do-the-longest-day-ride/</a></p>
  
  <p>But doesn't work on pages which have Google Maps on them like this: <a href="http://www.aride.org.nz/longest-day/2013/" rel="nofollow">http://www.aride.org.nz/longest-day/2013/</a></p>
  
  <p>You may need to reduce your viewport size so you can scroll the page down far enough.</p>
  
  <p>This seems to only happen on Chrome. It works as expected on Safari 5, Firefox 23, Opera 15 and even (ugh) Internet Explorer 9.</p>
  
  <p>Looking at the page in Chrome using Web Developer shows all of the correct stack levels with the z-index for the main content set at 1 - compared to 99/999/9999 for the header and navigation.</p>
  
  <p>Any ideas would be appreciated - I've hit a wall at my end.</p>