title: html overlayed ul-li element does not scrolled on android browser
body: <p>This is my html structure.
  <img src="https://i.stack.imgur.com/Otjxx.png" alt="enter image description here"></p>
  
  <p>section 1 can be scrolled horizontally with li elements
  and section 2 can be scrolled vertically.</p>
  
  <p>Before scrolling section2, the section1's scrolling works well.</p>
  
  <p>But, after scrolling section2, and make it like below,
  <img src="https://i.stack.imgur.com/NaCJO.png" alt="enter image description here">
  section 1 does not move and all scrolling event goes to section2.
  I can't understand why it works like that. (section1's z-index bigger than section2 so always it is on the section2)</p>
  
  <p>the strange thing is it works well at chrome browser on pc.
  but on my android browser(HTC evo), the section1 scrolling doesn't work when section2 scrolled to under section1.  </p>
  
  <p>Is there anybody explain this?</p>
  
  <p>thanks for reading.</p>