css - Z-index Element Stacking issue in Safari with top bar and overlay mobile menu

Question

I've got a weird CSS bug that I can't figure out. I am using a top-bar on my site, followed by the main content of my site, including a header with a mobile hamburger overlay menu.

I've set up a full CodePen that demonstrates it all: https://codepen.io/bluestarstudios/pen/WNoeGVR

The basic HTML structure is like this:

<div id="top_bar">This is our top bar</div>
<div id="main_body">
  <div id="header">
    <div id="logo">...</div>
    <div class="aux-burger">...</div>
  </div>
  <div id="content">
    <div id="shape">...</div>
    <p>Some text</p>
  </div>
</div>

Which results in the following layout: Screenshot of our generic page layout with top-bar and header

The menu works great in all browsers, covering the entire screen as expected. However, in Safari (and Mobile Chrome), the mobile menu shows up underneath the top-bar. Screenshot of element stacking issue in Safari

This is partially expected because the mobile menu is a child of the #main_body div. I've experimented with various z-index numbers for #top_bar and #main_body along with other CSS alterations and found that the only thing that allows the overlay menu to show on top of the top-bar is setting:

#main_body {
  overflow: visible;
}

However, that has an unwanted side effect in all browsers: the round background "shape" (used for demonstration purposes here) suddenly shows up above the top-bar. Screenshot of overflow issue

Sadly I'm unable to modify the HTML code, so I'm only limited to making CSS modifications. Can someone shed some light as to why this is happening and how to accomplish the following stacking order (top layer to bottom layer):

1. Mobile Overlay Menu
2. Top Bar
3. Main Body (with its header + actual content)

Thanks a ton!

question from:https://stackoverflow.com/questions/65929465/z-index-element-stacking-issue-in-safari-with-top-bar-and-overlay-mobile-menu

Answer 1

Waitting for answers