html - Layering Objects || Google Map & Nav Bar -



html - Layering Objects || Google Map & Nav Bar -

i'm trying create interactive google map page i'm having bit of problem layering divs.

my html looks this

<body> <div class="wrapper"> <div class="header"> <p class="logo"> set logo here later </p> </div> <div class="nav"> <ul> <li> link 1 </li> <li> link 2 </li> <li> link 3 </li> </ul> </div> <div class="content"> <div class="main"> <h1>google maps</h1> <div id="map"></div> </div> </div> <div class="footer"> <p> set footer downwards here later </p> </div> </div>

and related css looks this

#map{ position: absolute; overflow: hidden; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 0; } .nav{ background-color: #fff; width: 120px; height: 500px; z-index: 100; }

what happens @ moment map takes entire page (intentional) want nav bar float on top somehow. help appreciated. thanks!

simply add together position:absolute; .nav

jsbin demo

that reply lastly question (float nav bar on top of map somehow).

if want on map... way:

<body> <div id="map"></div> <div id="everythingelse"><!--all other content--></div> </body>

setting #everythingelse position: absolute;

example: http://jsbin.com/xanen/3/edit

html css

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -