Can't get z-index to function in flex container-CodePudding

I'm trying to arrange two empty divs as background elements behind a menu. All three elements are direct children of a flex container, but none of them will respect z-index, and I can't identify the cause. They will respect z-index when I set a position attribute, but then they lose the ability to flex.

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    font-size: 100%;
}

#menuWrapper {
    display: flex;
    flex-flow: column wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#menuBox {
    z-index: 10;
    width: 100%;
    display: flex;
}

#menuBG {
    z-index: 1;
    margin: 0;
    width: 100%;
    min-height: 140px;
    background-color: #000;
    flex: 1;
}

#menuBar {
    z-index: 2;
    background-color: #d50000;
    width: 100%;
    min-height: 60px;
    margin: 140px 0 0 0;
    flex: 1;
}

header {
    background-color: #FFF;
    border-radius: 4px;
    padding: 10px;
    margin: 25px 25px 15px 3%;
    width: auto;
    height: auto;
    flex: 0;
}

#siteHeading {
    color:#d50000;
    text-align: end;
    font-style: italic;
    display: flex;
    flex-direction: column-reverse;
    min-width: 400px;
    margin: auto 4% 0 auto;
    flex: 2 0; 
}

nav {
    display: flex;
    flex-direction: column;
    align-content: end;
    flex: 1;
    font-size: 2rem;
}

nav ul {
    list-style: none;
    margin: 0 4% 10px;
    display: flex;
    flex: 1; 
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
}

nav ul li {
    margin-left: 5%;
}

nav a {
    color: #000F;
    text-decoration: none;
}

<body>
    <div id="menuWrapper">
        <div id="menuBox">
            <header>
                <a href="#"><img src="./imgs/A  ManufacturingLogo.png" alt="A   Manufacturing Logo"></a>
            </header>

            <nav>
                <h1 id="siteHeading">A   Manufacturing</h1>
                
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

        <div id="menuBG"></div>

        <div id="menuBar"></div>
    </div>
</body>

CodePudding user response：

A bit unsure what your end goal is. I assume it is to have the menuBox section act as a sort of "navbar" that covers any elements below it and sticks to the top.

Regardless, after throwing your code into a Codepen, and after adding margin-top: -200px; to the menuBG element, z-index seems to be working just fine. It might have been that you did not have background-color set on the menuBox, which made it seem like the menuBG was covering it.

See the Codepen link for an example showing that your z-index's are working just fine, even without setting position.

https://codepen.io/Bluhurr/pen/zYpJVQa

CodePudding user response：

The z-index should be define as per example below. Also position attribute could be fixed, relative or absolute. But the key part is to define it.

.nav{
     position: fixed;
     display: flex;
     flex-direction: row;
     align-items: center;
     width: 100%;
     height: 96px;
     background-color: var(--dark-bg);
     z-index: 3; /* makes sure that navbar is on top of other elements */
     }

CodePudding user response：

You mean like this?

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    font-size: 100%;
}

#menuWrapper {
    display: flex;
    flex-flow: column wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#menuBox {
    z-index: 10;
    width: 100%;
    display: flex;
}

#menuBG {
    z-index: 1;
    margin: 0;
    width: 100%;
    min-height: 140px;
    background-color: #000;
    flex: 1;
}

#menuBar {
    z-index: 2;
    background-color: #d50000;
    width: 100%;
    min-height: 60px;
    margin: 140px 0 0 0;
    flex: 1;
}

header {
    background-color: #FFF;
    border-radius: 4px;
    padding: 10px;
    margin: 25px 25px 15px 3%;
    width: auto;
    height: auto;
    flex: 0;
}

#siteHeading {
    color:#d50000;
    text-align: end;
    font-style: italic;
    display: flex;
    flex-direction: column-reverse;
    min-width: 400px;
    margin: auto 4% 0 auto;
    flex: 2 0; 
    margin-top:-60px;
    
}

nav {
    display: flex;
    flex-direction: column;
    align-content: end;
    flex: 1;
    font-size: 2rem;
}

nav ul {
    list-style: none;
    margin: 0 4% 10px;
    display: flex;
    flex: 1; 
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
}

nav ul li {
    margin-left: 5%;
}

nav a {
    color: #000F;
    text-decoration: none;
}

<body>
    <div id="menuWrapper ">
        <div id="menuBox ">
            <header id="menuBG">
                <a href="#"><img src="./imgs/A  ManufacturingLogo.png" alt="A   Manufacturing Logo"></a>
            </header>
                  
            <nav id="menuBar">
               
                <h1 id="siteHeading">A   Manufacturing</h1>
                <ul id="menu ">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

    </div>
</body>