这是我昨天提出的一个问题的后续问题，此后我一直无法解决。
我正试图弄清楚如何从这个网站模仿双推菜单布局:https://www.etq-amsterdam.com/
网站标题两侧的按钮可从左侧或右侧打开菜单。
我已经尝试在我将在下面包含的 jsfiddle 中实现这一点。在这个 fiddle 中，我将与上面网站链接中相同的 transform:translate3d 规则应用于推送菜单。我想不通的是他们是如何设法让网站的 body 在菜单旁边向左或向右移动，从而产生“推送”效果。如果我将 transform:translate3d 直接添加到示例的 body`，它会破坏 header 上的固定定位。
正如昨天有人向我指出的那样，上面的网站使用了应用了 transform:translate3d 样式的 body 的子 div，但是我发现无法解决的是他们如何设法让子 div 不仅移动 body，而且还移动所有其他子 div，即页眉、页脚等。当然，如果一个 div 是从属于另一个，应用于它的任何 CSS 不应该也能移动 parent 吗？
下面是根据inspect element得到的网站HTML结构
<body class=“is-desktop has-header-background is-loading”>
<div class=“header”></div>
<aside id=“sidemenu”> class=“sidemenu”>…</aside>
<aside id=“shoppingcart”> class=“shoppingcart” data-quantity=“0”>…</aside>
<main id=“js-page-view” class=“page-view app-started”>
<div class=“page home-page” style=“opacity: 1;”> ==$0
<div class=“transform-container”>…</div>
</div>
</main>
<footer>
</footer>
</body>
应用了 transform:translate3d 样式的 div 是类 - "transform-container"。
从结构上看，这个 div 似乎是 body 的“曾孙”，但它似乎能够移动 body 和结构中位于其上方的所有其他 div。这怎么可能？
这是我在 jsfiddle 中的示例。我已经设法让菜单在两侧移动，就像我链接的网站一样，但如前所述，如果不破坏标题上的固定位置，我无法让正文移动。
最佳答案
所以这些人正在做的是，移动 id="navBar"和内容，无论它的 id 或 class 是什么。
因为他们是在子元素而不是标题元素上执行此操作，所以它会起作用。
不幸的是，因为您在代码中缺少额外的标记或者将元素保留在 header 中，您将很难做到这一点。
所以你可以在这里看到:
.header .nav {
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.open-left .header .nav {
transform: translate3d(281px,0,0);
}
新的标题标记:
<header class="header">
<div class="nav">
<span id="button-one"></span>
<span id="button-two"></span>
</div>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="overlay"></div>
</header>
你可以在 fiddle 中看到这个工作:
关于jquery - 使子 div 移动父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39661015/