0

I have some elements.

These:

  • fill_bg(fills the background)
  • numpad(custom numeric keypad)
  • dialog(popup dialog)

PROBLEM: "Dialog" opens correctly above "fill_bg" but "numpad" does not open correctly. The "numpad" is under "fill_bg". But that shouldn't happen.

These are their CSS properties:

#numpad{
    background-color: var(--theme-color);
    position: fixed;
    left: 7%;
    right: 7%;
    bottom: 0;
    border-radius: 30px 30px 0px 0px;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    display: none;
    z-index: 100;
}

#fill_bg{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(23, 23, 23,0.8);
    transition: 0.2s;
    z-index: 90;
}

#dialog{
    background-color: var(--theme-color);
    position: fixed;
    top: calc(50% - 10px);
    left: calc(10% - 10px);
    transform: translateY(calc(-50% + 10px));
    width: 80%;
    text-align: center;
    border-radius: var(--theme-border-radius);
    padding: 10px;
    display: none;
    z-index: 110;
}
Ekin
  • 107
  • 1
  • 9
  • 1
    Please add enough HTML so that it is clear what your structure is and make the code into a snippet we can run to see the problem. See https://stackoverflow.com/help/minimal-reproducible-example Just glancing at your code though did you know that e.g. transform can create a new stacking context. – A Haworth Jan 27 '22 at 18:42
  • Hi, I checked zIndex data from console and "fill_bg" returned empty string. Could it be because of this that the numpad has animation? – Ekin Jan 27 '22 at 18:45
  • Sorry, I repeat we need to see your HTM and an example snippet. It is impossible to divine what is happening from just the code given, for example display : none is set which would mean those elements not rendering at all. – A Haworth Jan 27 '22 at 19:39
  • Sorry, stackoverflow gave an error that the code is too long. So I uploaded the codes to this site: https://codeshare.io/0gpO0l The problem was with the "#numpad" div. Removing the #numpad element from the #main div, fixed it. But why, I don't understand. – Ekin Jan 27 '22 at 19:58

0 Answers0