Z-Index Issue: topbar-menu Not Overlapping msg in Fixed Structure

I'm having trouble with the z-index of elements in my layout. I need only the topbar-menu to have a greater z-index than the msg element, but my attempts to change the positioning types haven't worked. The structure I have includes a fixed topbar and topbar-main, and even with a high z-index for the topbar-menu, it's not rendering above the msg.

<div class="topbar" style="position: fixed; z-index: 1000; background-color: red; width: 2000px; height: 2000px;">
    <div class="topbar-main" style="background-color: blue; width: 200px; height: 200px;">
      <ul id="topbar-menu"
        style="position: absolute; z-index: 1000001; background-color: green; width: 100px; height: 100px;">
      </ul>
    </div>
  </div>

  <div class="msg" style="position: fixed; z-index:1007; background-color: yellow; width: 50px; height: 50px;">

Upvotes: 0

Views: 26

Answers (0)

Related Questions