Z-Index Isn't Applied

z-index isn't applied

There's actually two reasons:

  1. Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.

  2. A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.

Why does z-index not work?

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Why doesn't the z-index style apply to the body element?

The issue here is that if the html element doesn't have a background specified, the canvas adopts the background of the body element, and that gets painted first. CSS 2.1 says:

For documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for
'background-color' and 'none' for 'background-image', user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element.

See what happens when the html element is given a background:

html { 

background-color: white;

}

body {

background: rgba(33, 33, 33, 0.7);

}

#child {

width: 100px;

height: 100px;

background: yellow;

position: relative;

z-index: -1;

}
<body>

<div id="child"></div>

</body>

Why isn't z-index working?

Practical answers:

Depending on what you want to achieve (visually) you either have to place the elements to be hidden inside a sibling of their current top level parent or you have to rely on visibility to hide them.

Here is the parent sibling solution:

body{

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.first {

position: absolute;

z-index: 1;

width: 500px;

height: 500px;

background-color: grey;

animation: toggleOpacity 3s infinite;

}

.another-first {

z-index: 0;

}

.second {

position: relative;

z-index: 2;

width: 450px;

height: 450px;

top: 25px;

left: 25px;

background-color: orange;

opacity: 0.99;

}

.third {

position: absolute;

z-index: 3;

width: 400px;

height: 400px;

top: 25px;

left: 25px;

background-color: yellow;

opacity: 0.99;

}

.fourth {

position: absolute;

z-index: 20;

width: 350px;

height: 350px;

top: 25px;

left: 25px;

background-color: green;

opacity: 0.99;

}

.fifth {

position: absolute;

z-index: 5;

width: 300px;

height: 300px;

top: 25px;

left: 25px;

background-color: pink;

opacity: 0.99;

}

@-webkit-keyframes toggleOpacity {

0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); }

50% { -webkit-transform: translateX(150px); transform: translateX(150px); }

100% {-webkit-transform: translateX(-150px);transform: translateX(-150px);}

}

@-moz-keyframes toggleOpacity {

0% { -moz-transform: translateX(-150px); transform: translateX(-150px); }

50% { -moz-transform: translateX(150px); transform: translateX(150px); }

100% {-moz-transform: translateX(-150px);transform: translateX(-150px);}

}

@-o-keyframes toggleOpacity {

0% { -o-transform: translateX(-150px); transform: translateX(-150px); }

50% { -o-transform: translateX(150px); transform: translateX(150px); }

100% {-o-transform: translateX(-150px);transform: translateX(-150px);}

}

@keyframes toggleOpacity {

0% { -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px); }

50% { -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); transform: translateX(150px); }

100% {-webkit-transform: translateX(-150px);-moz-transform: translateX(-150px);-o-transform: translateX(-150px);transform: translateX(-150px);}

}
<div class="first"></div>

<div class="another-first">

<div class="second">

<div class="third">

<div class="fourth">

<div class="fifth">

</div>

</div>

</div>

</div>

</div>

z-index isn't working for my dropdown menu

Your nav element has position: sticky; but doesn't have any z-index. This means that anything positioned inside it is going to be positioning itself based off of that nav parent. If you add a z-index number higher than any other element on the page to that nav element, your nav will behave as you expect.

To use your example, the red box has z-index: 1;. If you add z-index: 2; to the nav element then your entire navigation will sit above it.

There is no need to have any of the children of nav z-indexed once this fix is in place as the parent element will positioned above everything else on the page already.

z-index weird behavior?

Here you are facing a hidden issue and translate/opacity has nothing to do here. When using negative z-index it's like you made your elements to be behind the body (since this one has a z-index set to auto). Then the body height is defined by its in-flow content (both divs) and using translate simply made the element to be placed below the body thus we can reach it and click it.

let's add some border/background to better see the issue:

function clickme() {

console.log(' button been clicked')

}
.d1,

.d2 {

border: 1px solid red;

z-index:-1;

position: relative;

}

.d2>button {

transform: translateY(50px);

}

body {

background:rgba(255,0,0,0.5);

border:2px solid;

}

html {

background:blue;

}
<div class="d1">

<button onclick="clickme();">Click Me</button>

</div>

<br>

<div class="d2">

<button onclick="clickme();">Click Me</button>

</div>

CSS z-index not working (position absolute)

Remove

z-index:0;

from .absolute.

Updated fiddle here.

anchor tags don't work on elements with z-index -1 and positioned elements overlap sticky menus

You can remove the z-index property from the salebox div element.

Instead you can try to apply the z-index property to the fixed menu bar, that is greater than the elements inside the body element.

Why is z-index ignored with position:static?

Because position: static means "Ignore all the positioning instructions from left, top, z-index, etc.".

'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements

— http://www.w3.org/TR/CSS21/visuren.html#z-index

An element is said to be positioned if its 'position' property has a value other than 'static'.

— http://www.w3.org/TR/CSS21/visuren.html#positioned-element



Related Topics



Leave a reply



Submit