模态弹出窗口位于滑块后面

Question

我正在尝试为客户详细信息打开一个模态弹出窗口。我在网站上也有一个滑块，但是当模态打开时它会滑到滑块后面，当我滑动页面时它完全可见。

弹出的Css：

        /* Full-width input fields */
 input[type=text], input[type=password] {
 width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {float:left;width:50%}

/* Add padding to container elements */
.container {
padding: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* 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 */
padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
   width: 100%;
  }
}

弹出的Html：

     <div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
 <form class="modal-content animate" action="/action_page.php">
<div class="container">
  <label><b>Email</b></label>
  <input type="text" placeholder="Enter Email" name="email" required>

  <label><b>Password</b></label>
  <input type="password" placeholder="Enter Password" name="psw" required>

  <label><b>Repeat Password</b></label>
  <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
  <input type="checkbox" checked="checked"> Remember me
  <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

  <div class="clearfix">
    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    <button type="submit" class="signupbtn">Sign Up</button>
  </div>
</div>

正如所读，弹出窗口应该在 / Body标签之前如此尝试但是没有用 如果您需要任何其他信息，请告诉我。

Answer 1

观察下面示例中的css属性：

.slider{
  background-color:red;
  height:300px;
  position:relative;
  z-index:9;
}
.pop{
  background-color:skyblue;
  position:absolute;
   height:200px;
   width:400px;
   top: 15%;
   left: 5%;
   z-index:9999;
}

<div class='slider'>Slider</div>
<div class='pop'>popup</div>

Answer 2

增加模态上的z-index值，直到模态出现在滑块上方。