Z-index isn't working?

So I have a footer with a z-index of -1 and its sitting on top of my stats section. And the stats section has a z-index of 1. Why is this happening.?

Can you post two screenshots, one showing what you expect (wish) to see and one showing what appears to be out of place now?

Right now, the <footer> is not positioned so z-index:-1 does not affect it’s level; and significantly, .inner-wrap is the outermost container for the rest of the page. The boxes need to have a parent container in common for z-index to interact.

1 Like

the second pic shows the footer start to cover the stats section when you scroll up. I’m trying to make a tucked footer like the one shown here
https://jsfiddle.net/Beaniie/zogbek4t/28/

OK, on my test page, I deleted all of the z-indexes except this one:

.inner-wrap {
    position: relative;
    z-index: 1;
}

then I applied a background color to .stats:

.stats {
    background-color:#fff;
. . . 
}

And one unrelated thing. The local stylesheet, which you have listed first, should be the LAST stylesheet in the cascade so your styles are not overridden by other styles and so you are not enticed to use the !important modifier inappropriately!

<head>
   <meta charset="UTF-8">
   <title>Kane Concrete And Construction LLC</title>
   <link rel="stylesheet" href="style.css">  <!-- move to the last stylesheet position -->
. . .
. . .
    move the local stylesheet link to here
}

See if that works for you.

smh I didn’t have a background color set on the stats section. I set the background color to white and that fixed the problem lol

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.