html - Interact with DIV under another DIVs margin on the phone -
i want build simple web-app displays map , list. list should on map, , should scrollable. map should remain @ same position, these 2 items deed layers.
i managed build purely html/css , works on computer, not on phone (iphone).
my code following:
<style> html { width: 100%; height: 100%; } .map { background-color: yellow; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .list { height: 2000px; width: 100%; background-color: blue; position: relative; margin-top: 200px; z-index: 1; color: white; } .layer { height: 100%; width: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } </style> <body> <div class="map"> map </div> <div class="layer"> <div class="list"><a href="#"> list </div> </div> </body> i can interact map when scroll downwards list on computer, not on phone. when add together css-property pointer-events: none; layer-div, can't click on links in (naturally). when alter margin-top list-div top: 200px doesn't work (on phone).
i created jsfiddle that.
edit made image google maps app. can see, drawer can drawn bottom top, map stays in place, both deed 2 layers.
what looking this:
<body> <div class="map"> map </div> <div class="list"> list<br>list<br>list<br>list<br>list<br>list<br>list<br>list<br>list<br>list<br>list </div> css:
html { width: 100%; height: 100%; } .map { background-color: yellow; position: absolute; top: 0; left: 0; bottom:0; right:0; z-index: 1; } .list { position:fixed; background-color: blue; top: 200px; bottom:0; left:20px; right:20px; z-index: 2; color: white; overflow-y: scroll; -webkit-overflow-scrolling: touch; } http://jsfiddle.net/j8g6a/1/
html css mobile web-applications mobile-application
No comments:
Post a Comment