製作小孩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

回答

相關問題