How Could I Prevent The Div From Blocking The Dropdown?

Question

There's this dropdown from W3Schools that seems to work after my editsLinks: 1 Unfortunately, another

element blocks it and the .dropdown:hover doesn't work.2 This happ

Solution 1:

Remove the z-index = -1 in #infoContainer and it shall work.

    #infoContainer {
      position: absolute;
      top: 10px;
      left: 76%;
      width: 23%;
      border: 1px solid dodgerblue;
      /* z-index: -1; */ /* REMOVE */
      /* [Result] text in the top-right corner blocks the menu,
         Also for the demonstartion */
      margin-top: 10%;
    }

function menu(text) {
  // respond
  console.log(`Click success: ${text}`)
}

// 4 seconds to hover over the menu icon
setTimeout(function() {
  document.getElementById("storyDiv").style.marginTop = "10%"
}, 4000)

#gameMenu {
  color: red;
}

#storyDiv {
  position: relative;
  display: inline-block;
  width: 75%;
  height: 75%;
  margin: 0;
  overflow-y: auto; /* Makes it scrollable if the text is too big */
  border: 1px solid blue;
  z-index: -2;
  pointer-events: none;
}

#story {
  margin: 0;
  position: relative;
  z-index: -2;
  pointer-events: none;
  border: 1px solid orange;
}


/* Edited dropdown from https://www.w3schools.com/howto/howto_css_dropdown.asp */

.dropdown {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  z-index: 1;
}

.dropdownContent {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 160px;
  z-index: 1;
}

.dropdownContent button {
  padding: 12px 16px;
  font-size: 16px;
  border: none;
  display: block;
}

.dropdown:hover .dropdownContent {
  display: block;
}


/* End of dropdown */

#infoContainer {
  position: absolute;
  top: 10px;
  left: 76%;
  width: 23%;
  border: 1px solid dodgerblue;
  /* z-index: -1; */ /* REMOVE */
  /* [Result] text in the top-right corner blocks the menu,
     Also for the demonstartion */
  margin-top: 10%;
}

#playerInfo {
  margin-top: 0;
}

<head>
  <!-- Menu symbol -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <div id='storyDiv'>
    <p id='story'>
      With i (color), em, ul, and li tags. As well as <br>br, and enough to expand the bottom-border enough so that it's visually below the menu icon, blocking it.<br>
    </p>
  </div>
  <div id='infoContainer'>
    <div class='dropdown'>
      <span class="material-icons" id='gameMenu'>menu</span>
      <div class='dropdownContent'>
        <button onClick='menu("Instructions")'> Instructions </button>
        <button onClick='menu("Settings")'> Settings </button>
        <button onClick='menu("Credits")'> Credits </button>
      </div>
    </div>
    <div id="playerInfo">
      <p>Another div with other stuff in it.</p>
    </div>
  </div>
</body>

Html5 College

How Could I Prevent The Div From Blocking The Dropdown?

Solution 1:

Post a Comment for "How Could I Prevent The Div From Blocking The Dropdown?"