使子div移动到父div

Question

This is a follow-up to a question I asked yesterday that I have since been unable to solve. 这是我昨天提出的一个问题的后续措施，此后我一直无法解决。

I am trying to figure out how to imitate a dual push-menu layout from this website: https://www.etq-amsterdam.com/ 我正在尝试弄清楚如何从此网站模仿双重推送菜单布局： https : //www.etq-amsterdam.com/

The buttons on either side of the website's header open a menu from the left or right hand side. 网站标题两侧的按钮可从左侧或右侧打开菜单。

I have made an attempt to achieve this in a jsfiddle which I'll include below. 我已经尝试在下面将要介绍的jsfiddle中实现这一点。 In this fiddle, I have applied the same transform:translate3d rules to the push-menus as in the website link above. 在这个小提琴中，我对推送菜单应用了与上面的网站链接相同的transform:translate3d规则。 What I can't figure out is how they've managed to get the body of the site to move left or right alongside the menus, thus creating the "push" effect. 我不知道的是他们如何设法使网站的body在菜单旁边向左或向右移动，从而产生了“推动”效果。 If I add transform:translate3d directly to the body` of my example, it breaks the fixed positioning on the header. 如果我将transform:translate3d directly to the添加transform:translate3d directly to the示例transform:translate3d directly to the主体中，则会破坏标头上的固定位置。

As somebody pointed out to me yesterday, the website above uses a child div of the body to which the transform:translate3d styles are applied, but what I'm finding impossible to work out is how they have managed to get the child div to move not only the body , but all the other child divs as well, ie the header, footer etc. Surely if a div is subordinate to another, any CSS applied to it shouldn't be able to move the parents too? 正如昨天有人向我指出的那样，上面的网站使用了将transform:translate3d样式应用于其body的子级div，但是我发现无法解决的问题是它们如何设法使子级div移动不仅是body ，还包括所有其他子div，例如页眉，页脚等。当然，如果一个div从属于另一个div，那么应用于它的任何CSS都应该也不能移动父母吗？

Here is the HTML structure of the website above according to inspect element 这是根据inspect元素的上述网站的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>

The div that has the transform:translate3d styles applied to it is the one with the class – "transform-container" . 对其应用了transform:translate3d样式的div就是具有该类的div – "transform-container" 。

From the look of the structure, it seems as though this div is a "great-grandchild" of the body and yet it seems able to move the body and all the other divs that are above it in the structure. 从结构的外观来看，该div似乎是body的“曾孙”，但似乎能够移动body以及结构中位于其之上的所有其他div。 How is this possible? 这怎么可能？

Here is my example in a jsfiddle. 这是我在jsfiddle中的示例。 I have managed to make the menus move on both sides in the same way as the website I've linked, but as mentioned, I can't get the body to move without breaking the fixed positioning on the header. 我已经设法使菜单在两侧移动，就像我链接的网站一样，但是如上所述，如果不破坏标题上的固定位置，就无法使主体移动。

https://jsfiddle.net/75dtb1zk/9/ https://jsfiddle.net/75dtb1zk/9/

Answer 1

So what these guys are doing is, moving the id="navBar" & the content, whatever the id or class for that is. 因此，这些人正在做的是移动id =“ navBar”和内容，无论其ID或类是什么。

Because they're doing it on a child element not the header element it will work. 因为他们是在子元素而不是header元素上执行的，所以它将起作用。

Unfortunately because you are missing extra markup in your code & or keeping elements inside of the header you'll have a hard time doing it. 不幸的是，由于您缺少代码中的额外标记和/或将元素保留在标头中，因此很难。

So you can see here: 因此，您可以在这里看到：

.header .nav {
  transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.open-left .header .nav {
  transform: translate3d(281px,0,0);
}

New header markup: 新的标题标记：

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

You can see this working in the fiddle: 您可以在小提琴中看到它的工作原理：

https://jsfiddle.net/75dtb1zk/12/ https://jsfiddle.net/75dtb1zk/12/

使子div移动到父div

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-09-23 13:05:26

使子div移动到父div

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-09-23 13:05:26

解决方案1
3 已采纳 2016-09-23 13:05:26