位置：固定在android上不起作用答案

【问题标题】：position:fixed does not work on android位置：固定在android上不起作用
【发布时间】：2014-03-14 13:52:19
【问题描述】：

我正在使用修改后的 960 网格构建响应式网站：

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

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

还有一个使用 position:fixed 将自身锁定在页面顶部的导航栏。

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

这在大多数情况下都可以正常工作，但在我的 Android 平板电脑上会中断。页面加载并正常工作，但是当我旋转平板电脑（将所有带有 .container_12 的标签从宽度：720px 更改为宽度：480px）时，导航栏要么消失，要么被锁定在页面一半的奇怪位置。我怎样才能解决这个问题？该网站还有一个图像，显示在 .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'>
...

【问题讨论】：

标签： html css navigation css-position

【解决方案1】：

您设置了position: fixed，但并未实际定位该元素。将 top: 0px 和 left: 0px 添加到您的导航栏 css 以确保它位于屏幕顶部。

.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;
}

【讨论】：

添加 top:0px 和 left:0px;解决了这个问题，谢谢。

【解决方案2】：

试试这个代码：

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

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

这将针对您的设备方向并“重置”您的代码。

【讨论】：

如果我在向下滚动页面之前旋转我的 android，此代码可以正常工作，但如果我正在查看“首屏下方”的内容，导航栏会锁定在低于顶部的位置页。它可能被锁定在视图的中间，或者在视图下方使其完全看不见（我认为这是正在发生的事情。我看不到导航栏。）

【解决方案3】：

感谢您在这个令人沮丧的问题上提供的帮助。

position: fixed; 最初在我的安卓和桌面设备上失败了。删除 position: relative;来自fixed 元素容器解决了桌面上的问题，但没有解决 android (Galaxy Note 5) 添加 -webkit-backface-visibility: hidden; 的元素也不适用于 android，但确实导致了一些有趣的闪烁和位置变化......
将display: block; 添加到元素的容器中固定了android 上的定位，它仍然可以在桌面上运行。

好东西长这样 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>

花了一个月的时间才找到此修复程序。不是编码员，但做一些编码希望这可以帮助其他人解决这个问题。

【讨论】：