Html “固定”菜单在“脱离画布”菜单打开时将丢失其固定值

我的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 -->

小提琴在这里：

---

这是因为定位是相对于它所在的元素的

#container

有

位置：relative

和

#header

有

位置：fixed

，因此header固定在容器顶部（并随容器一起向上滚动），而不是像您希望的那样滚动到页面

我将HTML中的

#标题

移出

#容器

，并在CSS中添加了这一行：

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

我删除了您所有的

位置：相对属性。在这种情况下不需要它们。默认情况下，所有元素都设置为
位置：静态
。你只需要
position:relative
当你定位时，它绝对是孩子们的

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

嗯，您是说您需要在菜单顶部看到标题吗？然后您应该增加标题的z索引。目前，标题和菜单都具有相同的z索引和相同的位置。
.menu-open #header {
  transform: translate(-300px, 0);
}