Solution 1 :

There’s a simple way you could do it, but it won’t have the best animation…
Give the nav a z-index, when you click the menu icon set the z-index of the ul to something less than your nav‘s z-index. To make the animation a bit better you could add this CSS to it as well (only after you click the menu icon)

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

You could use @keyframes to make an animation that will make it go behind the nav. Something like this:

@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. */

The main thing that you need to do is give your nav a z-index and when you put the ul underneath your nav you need to change your ul‘s z-index to a lesser number than you nav‘s z-index.

Hope this helps!

Problem :

I am not good at CSS. While developing a mobile menu, I stuck in setting the required order of z-index.



Here nav is header and contains, logo, search icon and menu in ul.

CSS code

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

Is it possible to bring ul under nav but above bodyusing z-index and position CSS properties?

I want to use CSS transform and transition properties to bring the slide down and up effect when clicking the menu icon. Since in current code, ul is sliding from top of nav, therefore it looks a bit of odd.


Comment posted by Tanner Dolby

Have you tried giving the other elements a

Comment posted by sanjay ojha

I have already tried. I have set z-index of

Comment posted by Scott Marcus


Comment posted by G-Cyrillus

can you set the full code of your issue ? transform creates a stacking context that you need to work with . as your code is, there is not much answer that will fit exactly your trouble … possible & classic cure is transform3d to send ul below nav … 1px is enough