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

  • 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>
    

    Wednesday, September 12, 2018 7:55 PM

Answers

  • 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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2018 8:07 PM

All replies

  • 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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2018 8:07 PM
  • 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

    Monday, September 17, 2018 8:20 AM