通過 z-index 和 position 將子元素移動到父元素下

Question

我不擅長 CSS。 在開發移動菜單時，我堅持設置所需的 z-index 順序。

HTML 代碼

<body>
    <nav>
        <ul></ul>
    </nav>
</body>

這里的nav是 header 並包含ul中的徽標、搜索圖標和菜單。

CSS代碼

body {
  position: relative;
  /*other properties*/
}
nav {
  /*css properties*/
}
ul {
  position: fixed;
  z-index: 100;
  /*other properties*/
}

是否可以使用z-index和position CSS 屬性將ul置於nav之下但在body之上？

我想使用 CSS transform和transition屬性來實現單擊菜單圖標時的上下滑動效果。 由於在當前代碼中， ul從nav頂部滑動，因此看起來有點奇怪。

Answer 1

有一個簡單的方法可以做到這一點，但它不會有最好的 animation ... 給nav一個z-index ，當你點擊菜單圖標時，將ul的z-index設置為小於你的nav ' s z-index 。 要使 animation 更好一點，您也可以將此 CSS 添加到其中（僅在您單擊菜單圖標后）

ul {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
    /* Other CSS properties */
}

您可以使用@keyframes制作一個 animation ，使其成為 go 后面的nav 。 像這樣的東西：

@keyframes {
    0% {
        z-index: 100;
    }
    50% {
        /* Just has to be some number less than nav's z-index */
        z-index: 1;

        /* The 100px is just some amount that will get the ul out
           of the way of the nav */
        transform: translate(0px, 100px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(0.9);
        /* I'm not completely sure that this translate will go
           back underneath or if the scale still needs to be
           there... just test somethings out with it to make
           it how you want. */
    }
}

您需要做的主要事情是給您的nav一個 z-index，當您將ul放在nav下方時，您需要將ul的z-index更改為小於nav的z-index的數字。

希望這可以幫助！

通過 z-index 和 position 將子元素移動到父元素下

問題描述

1 個解決方案

解決方案1
0 2020-06-24 17:43:27

通過 z-index 和 position 將子元素移動到父元素下

問題描述

1 個解決方案

解決方案1 0 2020-06-24 17:43:27

解決方案1
0 2020-06-24 17:43:27