Why does z-index not work

Question

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

User · Answer

Your elements need to have a position attribute   e g  absolute  relative  fixed  or z-index won t work

User · Answer

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      4 3  Flex Item Z-Ordering      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 than auto create a stacking context even if position is static       5 4  Z-axis Ordering  the z-index property      The 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 than auto create a stacking context even if    position is static     Here s a demonstration of z-index working on non-positioned flex items  https   jsfiddle net m0wddwxs

User · Answer

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   lt section class  quot content quot  gt                   lt div class  quot modal quot  gt  lt  div gt   lt  section gt    lt div class  quot side-tab quot  gt  lt  div gt      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  quot content quot  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

User · Answer

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   Important For regular positioning  be sure to include position  relative on the elements where you also set the z-index  Otherwise  it won t take effect

User · Answer

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   x000D   x000D  div   border  2px solid  000  width  100px  height  30px  margin  10px  position  relative  background-color   FFF    x000D   el3   background-color   F0F  width  100px  height  60px  top  -50px    x000D   lt div id  el1  style  z-index  5  gt  lt  div gt  x000D   lt div id  el2  style  z-index  3  gt  x000D     lt div id  el3  style  z-index  8  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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  amp  amp   el   el parentElement      There is a great article about stacking contexts on MDN

[html] Why does z-index not work?

Examples related to html

Examples related to css

Examples related to z-index