Reputation: 1
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