固定菜单在关闭画布菜单打开时失去固定答案

【问题标题】：Fixed menu loses its fixed when off canvas menu is open固定菜单在关闭画布菜单打开时失去固定
【发布时间】：2015-03-22 10:32:19
【问题描述】：

我的 css 固定菜单工作正常，固定在设置为相对位置的容器顶部，但是当用户单击导航链接时，会打开一个画布外导航，该导航也设置为固定，但它使原始菜单失去其固定位置。

这个想法是，您可以在页面下方的任何位置打开菜单，并且仍然可以看到标题。有人可以帮忙吗！

页面的基本代码在这里-

    <div id="container">
        <div id="content">        

            <div id="header" class="clearfix">
                <a href="#" class="nav-trigger">Menu</a>
            </div>

            <div class="slide">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur totam debitis porro repudiandae accusantium consequatur, reprehenderit enim et eos dolor, dignissimos esse! Reiciendis libero sunt, id quibusdam, harum blanditiis provident?</p>
            </div>


        </div> <!-- /#content -->

        <div id="menu">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Something</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div> <!-- /#menu -->

    </div> <!-- /#container -->

基本的 css 在这里：

#header{
position:fixed;
top:0;
right: 0;
z-index:999;
width: 100%;
height:60px;
background: yellow;
padding-top: 40px;
padding-right:40px;
text-align:right;
}

#container{
overflow:hidden;
position:relative;
min-width: 320px;
}

#content{
position:relative;
}

.menu-open #content{
transform: translate3d(-300px,0,0);
}

#menu{
position:fixed;
top:0;
right:0;
height:100%;
width:300px;
z-index:999;
background: $menu-dark-blue;
transform: translate3d(100%,0,0);
}

.menu-open #menu{
transform: translate3d(0,0,0);
}

小提琴来了：

https://jsfiddle.net/ohuafrc9/

【问题讨论】：

嗯，你是说你需要在菜单顶部看到标题吗？然后你应该增加标题的z-index。目前，标题和菜单都具有相同的 z-index 和相同的位置。

标签： html css

【解决方案1】：

这是因为定位是相对于它所在的元素而言的。 #container 有position: relative 和#header 有position: fixed，所以标题被固定在容器的顶部（并且会随着它向上滚动），而不是像你想要的那样到页面。

我在您的 HTML 中将 #header 从 #container 中移出，并在您的 CSS 中添加了这一行：

.menu-open #header {
  transform: translate(-300px, 0);
}

我删除了您的所有 position: relative 属性。在这种情况下不需要它们。默认情况下，所有元素都设置为position: static。当你绝对定位它的孩子时，你只需要position: relative。

为了以防万一，我还将 translate3d 更改为 translate。有时translate3d 会在你定位东西时弄乱东西。

I forked your JSFiddle with some changes here.

【讨论】：