How to solve when z-index not working based on the number?

I need to display Login Popup aobve the toggle menu layer.
So, I changed z-index of the Popup, which is higher than the menu layer.
But, the Login Popup still displays under the menu layer.
Would you please let me know how to solve this problem?

This is their structure.
nav part is the Toggle menu layer, and div part is the Login Popup.

<nav class="pp-advanced-menu--dropdown" style="z-index: 999999;">
    <div class="pp-menu-close-wrap">
    <ul class="pp-advanced-menu">Toogle menu layer is here</ul>
    </div>
</nav>
<div class="pp-offcanvas-container">
    <div id="yith-welrp" style="display: block;">
         <div class="yith-welrp-popup-wrapper close-on-click" style="z-index: 99999999;">Login Popup is here</div>
    </div>
</div>

Thank you.

Solution

You should add z-index to the same level tags of the dropdown, which is

<div class="pp-offcanvas-container" style="z-index: 99999999;">

If's still not working, you can try add style position: relative or position: absolute to popup:

<div class="pp-offcanvas-container" style="z-index: 99999999; position: relative;">