position:fixed does not work on android

问题

I am building a responsive website using a modified 960 grid:

@media only screen and 
(min-width: 720px) and (max-width: 959px){

.container_12{
  margin-left: auto;
  margin-right: auto;
  width: 720px;
}
}

and a navigation bar that uses position:fixed to lock itself to the top of the page.

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

This works fine in most cases, but it breaks on my android tablet. The page loads and works fine, but when I rotate the tablet (which changes all tags with .container_12 from width:720px to width:480px) the nav bar either disappears or gets locked in an odd place, half way down the page. How can I fix this? The site also has an image that appears behind the nav bar within .header-band:

.header-band{
    background-image:url('../img/header_band3.png');
    background-repeat:repeat-x;
    background-position:top;
    height: 400px;
    background-color: #050505;
    position: fixed;
    z-index: 1;
}

<div class='pageband nav-band'>
<ul class='horizontal-list'>
<li class='nav-item active'>
<a href="http://...">Home</a>
</li>
...
</ul>
</div>
<div class='pageband header-band'>&nbsp;</div>
<div class='pageband core-band'>
<div class='pageband logo-band '>
<div class='container_12'>
...

回答1:

You set position: fixed but do not actually position the element. Add top: 0px and left: 0px to your navigation bar css to make sure it is positioned at the top of the screen.

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

回答2:

Try with this codes:

@media screen and (orientation: landscape){
   .nav-band {
      // rest of code
   }
}

@media screen and (orientation: portrait){
   .nav-band {
      // rest of code
   }
}

This will target your device orientation and "reset" your code.

回答3:

Thanks for your help on this frustrating issue.

position: fixed; initially failed on my android and desktop devices. removing position: relative; from the fixed element container fixed the problem on the desktop but not the android (Galaxy Note 5) Adding -webkit-backface-visibility: hidden; to the element did not work for android either but did cause some interesting flickering and position changes...
adding display: block; to the element's container fixed the positioning on the android and it still works on the desktop.

Good stuff looks like this css:

body {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat: repeat-y;
  display: block;
  height: 200vh;
  overflow-y: scroll;  
  width: 100vh;  
} 

#fixed-red-box {
  position: fixed; 
  top: 6%; 
  right: 4%; 
  -webkit-backface-visibility: hidden; 
  height: 5vh; 
  width: 10vw; 
  border: 1vw solid red; 
  z-index: 300;
  }  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-
       scale=1"/>version=5.1"/>
  </head>
  <body>
    <div id="fixed-red-box"></div>
  </body>
</html>

took a month to find this fix. Not a coder but do some coding hope this may help someone else with this problem.

来源：https://stackoverflow.com/questions/22406959/positionfixed-does-not-work-on-android

标签

html5

css3

navigation

css-position