Why does negative z-index and non-static position disable my checkbox in most browsers?
The reason static works is because z-index is only applied to positioned elements - absolute, relative, fixed.
I believe in this instance, IE may have got the z-index right. The problem you are describing sounds like the checkbox is being placed behind the parent element in Chrome, FF, Safari and Opera.
The following text extract from W3.org descibes the order in which the z-index elements are drawn:
Within each stacking context, the following layers are painted in back-to-front order:
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
However, it sounds like Chrome, FF, Safari and Opera could be drawing the negative z-index elements (2) before the parent element's background (1).
In any case, as you can see, the negative z-index elements are pretty near the bottom of the pile, so if an element requires any kind of user interaction then a negative z-index is probably not the best choice.
Additional Note
Another reason it could be working in IE and not the others is that IE tends to treat "empty" elements as if they do not exist. So if there is something drawn above the checkbox but it contains nothing (no background, content etc) then IE will ignore it and allow interaction with the element below - where the other browsers will not.
Link with negative z-index not clickable in IE
The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.
Trying to select content of div with mouse(highlight text) that has a lower z-index
Live Demo
The problem is that z-index was negative, here's a fix:
*{
margin: 0;
padding: 0;
}
.first, .second, .third, .fourth, .fith{
height: 100vh;
background: pink;
z-index:2; // Add z-index for all classes
position: relative; // Add position relative
}
.sixth{
height: 100vh;
background: green;
}
.seventh{
height: 50vh;
background: hotpink;
}
.fith{
z-index: 0; // z-inde : Zero
background: red;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 0;
}
.box{
background: blue;
width: 300px;
height: 400px;
display: inline-block;
margin-top: 10%;
vertical-align: top;
}
.above{
position: relative;
top:100vh;
}
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>Link using z-index can't be clicked even though it's on top, in both Firefox & IE
The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign position:relative to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.
Checkbox tab index not working when set to hidden with custom design
I changed it from display: none; to opacity: 0; and it works fine here is the new edited code
http://jsbin.com/yuxizazo/1
How to z-index a repositioned div in css
To better see what is happening, add a background to the body element while setting negative z-index to your content and you will see that your text is hidden behind. 1
html,
body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
background:blue;
}
#top-menu {
position: fixed;
top: 0px;
background-color: red;
width: 100%;
height: 5em;
z-index: 2;
}
#right-menu {
position: fixed;
float: right;
right: 0px;
top: 5em;
background-color: cyan;
width: 10em;
height: calc(100% - 5em);
}
#container {
position: relative;
top: 0em;
left: 0em;
width: calc(100% - 10em);
height: calc(100% - 0em);
z-index: -1;
}
#container p {
z-index: -1;
}
.menu-item {
position: relative;
height: 5em;
line-height: 5em;
width: 100%;
background-color: yellow;
text-align: left;
cursor: pointer;
padding: 0 0 0 1.5em;
margin: 0 0 1.5em 0;
border: solid red 1px;
z-index: 10 !important;
}
.menu-item:first-of-type {
margin-top: 1em;
}
.menu-item:hover {
background-color: green;
position: relative;
left: -2em;
z-index: 10 !important;
}
.menu-item span {
display: inline-block;
vertical-align: middle;
line-height: normal;
z-index: 10 !important;
}
.custompadding {
position: relative;
text-align: right;
right: 1em;
width: 100%;
padding-top: 6rem;
margin-top: 0em;
}
.custompadding:first-of-type {
padding-top: 7rem;
}<div id="top-menu">
Rolf Vidar Hoksaas
</div>
<div id="right-menu">
<div class="menu-item" onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>
<div class="menu-item" onclick="location.href='#header-personalinfo'"><span>Personal information</span></div>
</div>
<div id="container">
<h1 id="header-contactdetails" class="custompadding"> Heading 1 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
<h1 id="header-personalinfo" class="custompadding"> Heading 2 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
</div>jQuery, issue with slideToggle
Try changing the z-index of .box to -1, so it is not covering .test and blocking the mouseover.
.box{
position: absolute;
z-index: -1;
}
Here's the JSFiddle.
EDIT: Since a negative z-index will make the element be behind all other elements (which you might not want), you could also position .test and make sure that it has a higher z-index than .box.
.box{
position: absolute;
}
.test {
z-index: 1;
position: absolute; /*could be relative or fixed too*/
}
And the JSFiddle.
Related Topics
Pure CSS Continuous Horizontal Text Scroll Without Break
Rounded Corners in Outlook Without Images
Html5: Non-Replaced VS. Replaced Element
How to Render a Field Request Without Refreshing the Page
Why Is 100% Height Not 100% of the Browser Height
Is It a Bug? Margins of P Element Go Outside the Containig Div
Table with Fixed Header at Top
How to Avoid Wrapping in CSS Float
White Space Between the Title and Web Browsers
Make Two Columns the Same Height
Setting Width:Auto Leads to Width:100%
HTML Fieldset Allows Children to Expand Indefinitely
Float Multiple Fixed-Width/Varible-Height Boxes into 2 Columns
Stray Vertical Line Above 965 Pixels with Border Radius in Safari