z-index isn't applied
There's actually two reasons:
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.
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
Concatenate Values in Less (Css) Without a Space
Tw Bootstrap: How to Overflow Columns
Google Webfont Conflict with Local Font
Jekyll Site Works Locally But Not on Github Pages
Less/Sass Debugging in Chrome Dev Tools/Firebug
Center Navbar in Twitter Bootstrap 2.0
How to Change Font Color of Primary Palette in Angular Material2
CSS Fixed Position with Auto Margin
Hover and Click on CSS Triangle
Safari and Ie Can't Read Ttf and Eot Fonts
Prevent a Pseudo Element from Triggering Hover
Which CSS Selector Can Be Used to Select a Flex Box Item in Wrapped State
Remove "Whitespace" Between Div Element
Using CSS to Transition the Fill Property of an Svg Path on Hover
How to Standardize the Height of a Select Box Between Chrome and Firefox