-1

<body>
  <div id="header"></div>

  <div id="mainArea">
    <div class="container page">
      /* Paragraph here */
    </div>
  </div>
</body>

I intended to have a drop menu on "header" and have a page designed as this [Pic1.

But after that, when I changed the opacity of "mainArea" to 0.8, it turned out to be this [Pic2.

The mainArea is now on top of the navigation bar in the header. I tried to changed its z-index but nothing changed.

Update:

I'd already read about the stacking context, you can read it more detail at MDN The stacking context.

The only thing I mistook then is that I thought z-index was inherited, but it turned out to be not. Nevertheless, when I tried to apply it on children positioned element and it worked.

Hope this will help somebody has the same problem. The recommend links of the others are also very useful for me.

elPsyChris
  • 85
  • 2
  • 9
  • My problem has finally been solved by using rgba() in background-color instead of using opacity. Changing opacity property of element seems to create a change in stacking orders in my case. – elPsyChris Jul 04 '16 at 01:54

2 Answers2

2

I had same problem before. I don't know the actual reason but while you define opacity attribute on the div containing the menu, z-index doesn't work.

Remove opacity and try z-index, not sure

psuresh
  • 535
  • 2
  • 13
  • 25
2

You need to add margin-top to the mainArea.

.mainArea{
    margin-top:10px; // choose whatever value suits you.
}

Also, remove the z-index and opacity as they have nothing to do with the problem.

  • It worked but then, I was wonder that is there any solution to get the "mainArea" behinds the navigation bar or not, because it appears to be on top of my navbar so I can't hover the mouse to the element behind it. – elPsyChris Jul 03 '16 at 10:35
  • Just increase the value of the margin-top and it will come down. Why would you want to move it behind? –  Jul 03 '16 at 10:37
  • Because the design I want is like the first pic above and I changed the opacity property to be able to see the background but it covered the drop menu and causes me problem. – elPsyChris Jul 03 '16 at 10:41