So if I understand z-index
correctly, it would be perfect in this situation:
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
The z-index
property only works on elements with a position
value other than static
(eg 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.
If you set position to other value than static
but your element's z-index
still doesn't seem to work, it may be that some parent element has z-index
set.
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
So with following html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; } #el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div> <div id="el2" style="z-index: 3"> <div id="el3" style="z-index: 8"></div> </div>
no matter how big the z-index
of el3
will be set, it will always be under el1
because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3
is actually 3.8 which is lower than 5 .
If you want to check stacking contexts of parent elements, you can use this:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
Your elements need to have a position
attribute. (eg absolute
, relative
, fixed
) or z-index
won't work.
In many cases an element must be positioned for z-index
to work.
Indeed, applying position: relative
to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
Actually, position: fixed
, position: absolute
and position: sticky
will also enable z-index
, but those values also change the layout. With position: relative
the layout isn't disturbed.
Essentially, as long as the element isn't position: static
(the default setting) it is considered positioned and z-index
will work.
Many answers to "Why isn't z-index working?" questions assert that z-index
only works on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index
even when position
is static
.
From the specs:
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-index
values other thanauto
create a stacking context even ifposition
isstatic
.5.4. Z-axis Ordering: the
z-index
propertyThe painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-index
values other thanauto
create a stacking context even ifposition
isstatic
.
Here's a demonstration of z-index
working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Make sure that this element you would like to control with z-index does not have a parent with z-index property , because element is in a lower stacking context due to its parent's z-index level.
Here's an example:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
// CSS //
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because " content " is the parent with a z-index property.
Here's an article that explains 4 reasons why z-index might not work: https://coder-coder.com/z-index-isnt-working/
Z-index needs those to work:
overflow: hidden;
Along with setting position, you should also be aware of the Stacking context. Please see this answer for more details.
I have had the same problem with z-index and you believe me or not it's fixed just by setting the background color
like this
background-color: white;
If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index
doesn't work.
The following code has invalid HTML syntax:
<div class="over"/>
<div class="under"/>
...(it's is invalid syntax because a div isn't a self closing tag).
CSS properties that were applied to these rogue HTML elements, such as background-color: black
, position: fixed
, width: 150px
, and top:150px
, were all working as expected. However, the z-index: 2
property wasn't working under the exact same conditions.
Only when the invalid HTML was fixed did the z-index
work correctly.
I'm not sure why z-index
was pickier than the other CSS attributes, but maybe this answer can help someone.
在我的情况下,我的导航栏的不透明度为 0.9,我从 codercoder.com 得到了答案,因为我从导航栏的 css 中删除了 opacity 属性,z-index 有效
just give position other that static. And u should give both container a position than it will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.