制作小孩div移动父div

这是我昨天问过的一个问题的后续行动，因为我之后无法解决这个问题。制作小孩div移动父div

我试图找出如何从这个网站模仿双推菜单布局：https://www.etq-amsterdam.com/

在网站上的头两侧打开从左边或右边的菜单按钮。

我试图在jsfiddle中实现这一点，我将在下面介绍。在这个小提琴中，我已经将相同的transform:translate3d规则应用于推式菜单，就像上面的网站链接一样。我无法弄清楚的是，他们如何设法让网站的body沿着菜单向左或向右移动，从而产生“推送”效果。如果我添加我的示例的transform:translate3d directly to the body，它会打破标题上的固定位置。

昨天有人向我指出，上面的网站使用body的子div，transform:translate3d样式被应用，但我发现不可能解决的是他们如何设法获得子div不仅要移动body，还要移动所有其他子div，即页眉，页脚等。当然，如果一个div从属于另一个div，那么应用它的任何CSS都不应该能够移动父母？

这里是根据检查元件

<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上述网站的HTML结构 - "transform-container"。

从结构的外观来看，似乎这个div是body的“曾孙”，但似乎能够将body以及其上的所有其他div都移动到结构中。这怎么可能？

这是我在jsfiddle中的例子。我已经设法使菜单在两侧移动，就像我所链接的网站一样，但是如前所述，如果不打开标题上的固定位置，我不能移动主体。

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

来源

2016-09-23 Jack1991

那么这些家伙正在做的是，在移动ID =“导航栏” &的内容，无论ID或类即是。

因为他们正在做一个子元素而不是头元素它会工作。

不幸的是，因为您在代码&中缺少额外的标记，或者在头文件中保留元素，您将很难做到这一点。

所以，你可以在这里看到：

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

你可以看到在捣鼓这方面的工作：

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

来源

2016-09-23 13:05:26

感谢安迪，我从来没有我以为我会找到一个答案。所以，我正确理解，如果父母有'position：fixed'，并且子div获得'transform' CSS，它不会破坏父母的固定位置？我注意到的另一件事是，自从应用了“变换”规则以来，content div似乎已经到达了'z-index' - 有没有办法解决这个问题？ – Jack1991

那里有很多点，转换标题涉及所有的子元素跟随 - 并由于某种原因变成一个奇怪的溢出隐藏情况。不知道为什么会发生这种情况，我想只是在叠加层和侧边栏上粘贴高Z指数。很高兴有帮助。 –

制作小孩div移动父div

回答

相关问题