Fixed div hides elements with higher z-index

I want to show a mobile menu that is displayed full screen and hides all the content except the page logo and hamburger menu icon. The following is my test code, note that it also hides the page logo and hamburger menu icon though they both have a z-index of 50 which is higher than then z-index of 20 of the mobile menu.

<div id="container">
  <div class="sticky top-0 bg-red-950 flex justify-between">
    <div class="z50">my page logo</div>
    <div class="z50">my hamburger menu icon</div>
  </div>
  <div class="bg-gray-600">content</div>
</div>
<div class="fixed top-0 bottom-0 left-0 right-0 bg-amber-300 z-20">
  this menu should not hide logo or menu icon as this menu has a z-index of 20,
  but logo and menu have a z-index of 50
</div>

result (note that neither page nor hamburger menu icon are visible)

What am I doing wrong?

When you apply position, display: flex, display: grid it creates a new stacking context for their child elements. Now, the z-index property works according to that stacking context. In that case it doesn't matter if you apply z-index: 50 or z-index: 99999 it's does never effect it surrounding element's stacking context. You can Imagine stacking like layers and layers groups in photoshop (if you ever used). So, the simplest fix in your case is to apply z-index to sticky div or add menu icon and logo separately for mobile menu or if you are using some framework which support modular component approach create a little separate component and reuse it at both places.