html - Position:fixed menu disappears when using bottom:0 -


testing on chrome: want menu stick bottom left. shows when not using bottom: 0. if use top works. causing issue? 

.mobile-menu {    display: block;    position: fixed;    left: 0;    bottom: 0;    margin: 0;    padding: 30px;    width: 80px;    z-index: 999;    background-color: red;  }
<div class="wrapper">    <nav class="mobile-menu">testing menu</nav>    <header class="header">      <div class="main-logo">        <object data="svg/main-logo.svg" type="image/svg+xml">          <img src="fallback.jpg" />        </object>      </div>      <nav class="main-nav">        <ul>          <li><a href="">about</a>          </li>          <li><a href="">services</a>          </li>          <li><a href="">contact</a>          </li>        </ul>      </nav>    </header>  </div>

make .wrapper position: relative , .mobile-menu position: absolute. in order illustrate problem better, added content under header. green menu = good , red menu = bad.

solution

  • in demo have renamed red menu to: .mobile-menuoriginal
  • i have added identical .mobile-menu , changed background-color: green , position: absolute

reasons

  • position: fixed place element relative viewport, bottom:0 place element @ bottom of screen.

  • position: relative places element in relation it's original position, placing .wrapper in position: relative no specific coordinates (i.e. top, right, left, , bottom), .wrapper stays is. reason why .wrapper needs can out of normal flow.

  • position: absolute places element in relation it's parent, putting .mobile-menu absolute positioning, position within borders of .wrapper because .wrapper .mobile-menu's parent , closest positioned element. mentioned closest positioned because there exceptions said positioned parents. please refer article before confuse you.

edit

@t.niese further explains:

[...]the reason why .wrapper needs can out of normal flow.[...] out of flow bit misleading, because element position relative has visual displacement object, still use same space in flow before , still influenced surrounding in contrast absolute move element out of flow.

.wrapper {    position: relative;  }  .mobile-menu {    display: block;    position: absolute;    left: 0;    bottom: 0;    margin: 0;    padding: 30px;    width: 80px;    z-index: 999;    background-color: green;  }  .mobile-menuoriginal {    display: block;    position: fixed;    left: 0;    bottom: 0;    margin: 0;    padding: 30px;    width: 80px;    z-index: 999;    background-color: red;  }
<!doctype html>  <html>    <head>  </head>    <body>    <div class="wrapper">      <nav class="mobile-menu">testing menu</nav>      <nav class="mobile-menuoriginal">testing menu</nav>      <header class="header">        <div class="main-logo">          <object data="svg/main-logo.svg" type="image/svg+xml">            <img src="fallback.jpg" />          </object>        </div>        <nav class="main-nav">          <ul>            <li><a href="">about</a>            </li>            <li><a href="">services</a>            </li>            <li><a href="">contact</a>            </li>          </ul>        </nav>      </header>    </div>        <section>      <h1>title</h1>      <h2>byline</h2>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>      <p>content</p>    </section>    <footer>      <h3>footer</h3>    </footer>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more