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
Post a Comment