title: Bring modal to front
body: <p>Hey I am trying to bring this modal infront of the other elements on the page. 
  I already tried  z-index: -1.</p>
  
  <p>I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox. 
  Thank you for your help.</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; front; /* Stay in place */  
       padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 600px; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      z-index: 1; /* Sit on top */
  }
  
  /* Modal Content */
  .modal-content {
      background-color: #00A1E0;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 511px;
  height: 250px;
  }
  
  /* The Close Button */
  .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: #blue;
      text-decoration: none;
      cursor: pointer;
  
  
  
  &lt;/style&gt;
  
  
  
  
  &lt;body&gt;
  
  
  &lt;style&gt;
  div.background {
  
    border: 0px solid black;
  div {
      background-color: #00A1E0;
      width: 511px;
  }
  }
  
  div.transbox {
    margin: 30px;
    background-color: #00A1E0;
    border: 1px solid black;
  opacity: 15%;
  width: 511;
    filter: alpha(opacity=100); 
  }
  
  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  
  &lt;!-- Trigger/Open The Modal --&gt;
  &lt;button id="myBtn"&gt;Add to shopping card
  &lt;div class="background"&gt;
    &lt;div class="transbox"&gt;
  &lt;style&gt;
  #myBtn { color: #00A1E0; }
  div.background {
  
    border: 0px #00A1E0;
  div {
      background-color: #00A1E0;
      width: 511px;
  }
  }
  
  div.transbox {
    margin: 30px;
    background-color: #FF530D;
   color: #00A1E0;
  opacity: 80%;
  width: 200;
    filter: alpha(opacity=100); 
  }
  
  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #00A1E0;
  }
  #myModal { background: ; }
  
  &lt;/style&gt;
  &lt;/button&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;span class="close"&gt;×&lt;/span&gt;
      &lt;p&gt;you have added the classic business cards to the shopping cart&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  
  {
  
  document.getElementById("resultSection").style.fontSize = "350%";
  
  
  
              document.getElementById("resultSection").innerHTML = "&lt;H2&gt;&lt;/H2&gt; " + result; 
  
  
                                                 }
  &lt;/script&gt;
  &lt;style&gt; #myBtn {  
       position: relative;
  
  
  
   font-size: 34px;
  
  }
  &lt;/style&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>