z-index not working with position absolute

Question

I opened the console  chrome firefox  and ran the following lines      body   append   lt div id   popupFrame   style   width 100  height 100  background-color black opacity 0 5 position absolute top 0 left 0 z-index 1      gt        body   append   lt div id   popupContent   style   width 200px height 200px z-index 1000 background-color white     gt dasdasdsadasdasdasdasdasd lt  div gt       The  popupContent should be above all but it s affected by the  popupFrame opacity   The content is not contained in  popupFrame what makes this very weird   The goal is to create firefox like alert box

User · Accepted Answer

The second div is position  static  the default  so the z-index does not apply to it   You need to position  set the position property to anything other than static  you probably want relative in this case  anything you want to give a z-index to

User · Answer

z-index only applies to elements that have been given an explicit position  Add position relative to  popupContent and you should be good to go

User · Answer

Old question but this answer might help someone   If you are trying to display the contents of the container outside of the boundaries of the container  make sure that it doesn t have overflow hidden  otherwise anything outside of it will be cut off

User · Answer

I faced this issue a lot when using position  absolute   I faced this issue by using position  relative in the child element  don t need to change position  absolute to relative  just need to add in the child element look into the beneath two examples   x000D   x000D  let toggle   document getElementById  toggle    toggle addEventListener  click        gt     toggle classList toggle  change       x000D   container     width  60px    height  22px    background   333    border-radius  20px    position  relative    cursor  pointer       change  slide     transform  translateX 33px       slide     transition  0 5s    width  20px    height  20px    background   fff    border-radius  20px    margin  2px 2px    z-index  100      dot     width  10px    height  16px    background  red    position  absolute    top  4px    right  5px    z-index  1    x000D   lt div class  container  id  toggle  gt     lt div class  slide  gt  lt  div gt     lt div class  dot  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   This s how it can be fixed using position relative   x000D   x000D  let toggle   document getElementById  toggle    toggle addEventListener  click        gt     toggle classList toggle  change       x000D   container     width  60px    height  22px    background   333    border-radius  20px    position  relative    cursor  pointer       change  slide     transform  translateX 33px       slide     transition  0 5s    width  20px    height  20px    background   fff    border-radius  20px    margin  2px 2px    z-index  100          Just add position relative    position  relative      dot     width  10px    height  16px    background  red    position  absolute    top  4px    right  5px    z-index  1    x000D   lt div class  container  id  toggle  gt     lt div class  slide  gt  lt  div gt     lt div class  dot  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   Sandbox here

User · Answer

Opacity changes the context of your z-index  as does the static positioning   Either add opacity to the element that doesn t have it or remove it from the element that does   You ll also have to either make both elements static positioned or specify relative or absolute position   Here s some background on contexts  http   philipwalton com articles what-no-one-told-you-about-z-index

[html] z-index not working with position absolute

Examples related to html

Examples related to css