Javascript 收割台未保持在原位

我已经使用

  position:fixed;

这很好用，但在我的android设备上的Chrome上不行。标题get被某个东西推开，放在不应该放的地方：距顶部100像素，而不是距顶部0像素

我猜这是由于我使用的一些javascript造成的。javascript的第一部分是当用户按下图标时，会显示一个菜单，代码如下：

 <script type="text/javascript">
    $(document).ready(function() {
        $('#toggle').click(function(){
            $('div.showhide').toggle();

        });
    });
</script>

如果有人能帮我解决这个问题，我将不胜感激

我创建了一个带有header和content div的示例

#header
{
position:fixed;
...
    top:0;
    left:0;
}
#content
{
margin-top:set your header height;
}

---

请使用

jsFiddle.

尝试设置顶部：0；左：0；到您的容器。顶部：0；左：0；不适合我。我已将代码添加到JSFIDLE:

位置：绝对

不会将元素保留在视口中

Absolute

表示它相对于第一个父对象的位置不是静态的（默认）。如果没有与此匹配的父级，则它将相对于文档进行定位<代码>位置：固定将相对于设备的视口（浏览器窗口）定位元素。但是，绝对和固定都是在文档流之外呈现的，因此您必须添加填充/边距，以使您的其余内容根据间距调整！当然是固定的。换了正职。

<div class="showhide">
    <div class="menubg">
        <div class="menu">
            <div class="container">
                <div class="item">
                    <div class="img">
                        <a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;"  src="img/conversations.png" alt="conversations" />
                    </div>
                    <p>Gesprekken</a></p>
                </div>
                <div class="item">
                    <div class="img">
                        <a href="home.cfm" style="color: white; text-decoration: none;">            <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
                    </div>
                    <p>Vrienden</a></p>
                </div>
                <div class="item">
                    <div class="img">
                        <a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
                    </div>
                    <p>Ik</a></p>
                </div>
                <div class="clear"></div>
                <div class="item">
                    <div class="img">
                        <img src="img/HC.gif" alt="reception" />
                    </div>
                    <p>Receptie</p>
                </div>
                <div class="item">
                    <div class="img">
                            <a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
                    </div>
                    <p>Instellingen</p></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="headbg">
    <div class="header">
        <a href="#">
            <img src="img/conversations.png" alt="conversations" class="nav left" />
        </a>
        <a href="#">
            <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
        </a>
        <a href="#">
            <img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
        </a>
    </div>
</div>


<div class="content">
   </div>
   // Page continues after this but it isn't causing the problem

.menubg {
width: 100%;
background-color: #201d19;
}
  .menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
   }
  .showhide {
display: none;
   }
  .container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
   }
   // This is not all the css, if it's needed i'll add it

#header
{
position:fixed;
...
    top:0;
    left:0;
}
#content
{
margin-top:set your header height;
}