Dropdown menu is dropped down Below a DIV even that z-indexes are correct

Question

User-1456397830 posted

Hello!

I have a problem with a menu (drop down menu).

On dekstop computer and chrome, this dropdown menu when it is shown do show ON TOP of a DIV that is below the dropdown menu which is correct. This works correctly on a desktop computer and chrome!

I have put the z-index of the menu larger(11000) than the black div background to make it be -on top-
The dropdown menu is used for mobile devices. But clicking the dropdown menu on a mobile device. The dropdown menu is shown BELOW the black div background which is the problem.

The problem is that the "dropdown Meny" - dropdown menu is below the theopacityDIV on a mobile device, what can cause this?

<!-- Default dropleft button -->
<div class="btn-group dropleft mobilemenutop" style="z-index: 11000">
<table><tr><td align="center" style="padding-top: 2px; z-index: 11000">
<a href="default.aspx">
	<img src="images/michelangelo-logo2.png" alt="IMG-LOGO" data-logofixed="images/michelangelo-logo2.png" style="width: 100%; max-width: 100px">
</a>
</td></tr>
<tr><td align="center" style="padding-top: 5px">
  <button type="button" class="btn btn-secondary dropdown-toggle topmenuopacity2 topmenubuttons2 topmenubuttonsfocused2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Meny
  </button>
  <div class="dropdown-menu" style="z-index: 11000">
    <a class="dropdown-item" href="default.aspx">Hem</a>
    <a class="dropdown-item" href="lunch-menu.aspx">Meny</a>
    <a class="dropdown-item" href="valvet.aspx">Valvet</a>
    <a class="dropdown-item" href="reservation.aspx">Reservation</a>
    <a class="dropdown-item" href="eventkalender.aspx">Events</a>
    <a class="dropdown-item" href="gallerier.aspx">Gallerier</a>
    <a class="dropdown-item" href="gastbok.aspx">Gästbok</a>
    <a class="dropdown-item" href="kontakt.aspx">Kontakt</a>
  </div>
</td></tr></table>
</div>


<div id="theopacityDIV" runat="server" class="opacityscreen" style="max-width: 950px; height: 100%; padding: 30px; padding-bottom: 10px;
     vertical-align:top; visibility: visible; z-index: 999; ; top: 177px; border-radius: 20px;
     color: white">
</div>

Answer 1

User-1456397830 posted

I found a fast solution.

By changing to negative z-index this actually solved the problem on a mobile device.

Thank you!

Answer 2

User61956409 posted

Hi jackco,

Glad to hear you solve the problem by yourself. The z-index property only works on positioned elements, please check if <div class="dropdown-menu" style="z-index: 11000"> and others elements that you set z-index property are positioned elements.

jackco

By changing to negative z-index this actually solved the problem on a mobile device.

Do you mean that changing z-index of <div id="theopacityDIV"> to negative number help solve the problem?

With Regards, 

Fei Han