html - 为什么我的弹出窗口没有出现在所有其他 html 元素之上？

Question

.box {
  width: 40%;
  margin: 0 auto;
  padding: 35px;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
  display: inline-block;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #222;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 999 !important;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

这是我的按钮上的 CSS，它将触发一个弹出窗口。但是，弹出窗口下(应该是)的一些元素出现并覆盖了弹出窗口上的文本。我已经尝试将 z-index 设置为 99999 但根本不起作用。有什么想法吗？

下面是建议的 html 代码

            <div class="box">
                <a class="button" href="#popup1">News</a>
            </div>

            <div id="popup1" class="overlay">
                <div class="popup">
                    <h2>Upcoming event</h2>
                    <a class="close" href="#">&times;</a>
                    <div class="content">
                        Christmas is coming! The first ever Christmas tour to Australia is coming soon. We are looking forward to see you.
                    </div>
                </div>
            </div>

已编辑:

我想我需要提供更多信息来解释。下面的输入字段和 iframe 元素将覆盖我的弹出窗口，而不仅仅是由于透明属性而简单地出现在弹出窗口后面。弹出窗口触发后，背景将呈一点灰色，但该元素将以白色背景色显示，这是我网页的默认颜色。 下面的元素没有被覆盖就出现了......

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            Youtube Playlist
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            Youtube Single Video
        </div>    
    </div>
    <form class="form-horizontal" method="POST">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('yttt') .style.display=='none') {document.getElementById('yttt') .style.display=''}else{document.getElementById('yttt') .style.display='none'}">Show/Hide</button></span>
                    <input type="text" class="form-control" id="ytlistbox"><span class="input-group-btn"><button class="btn btn-default" id="listclick">Preview</button></span>
                    <span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confirm</button></span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('ytt') .style.display=='none') {document.getElementById('ytt') .style.display=''}else{document.getElementById('ytt') .style.display='none'}">Show/Hide</button></span>
                    <input type="text" class="form-control" id="ytsinglebox"><span class="input-group-btn"><button class="btn btn-default" id="singleclick">Preview</button></span>
                    <span class="input-group-btn"><button class="btn btn-default" id="singleclick">Confrim</button></span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div>
    </form>
    <br />
    <?php 
        $query2 = mysql_query("SELECT listurl, singleurl FROM tbluser WHERE user_Id = '$userid'");
        $row2 = mysql_fetch_assoc($query4);
    ?>
    <div id="yttt" class="col-lg-6" style="display: ;">
        <iframe id="ytlist" src="https://www.youtube.com/embed/videoseries?list=<?php echo $row2['$listurl']?>&autoplay=1&loop=1" name="ytlist"  width="550" height="400" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="ytt" class="col-lg-6" style="display: ;">
        <iframe id="ytsingle" src="" name="ytsingle"  width="550" height="400" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

我知道出于安全目的使用 mysqli、strip_tag() 和 real_escape_string() 函数的很多优点。请不要再提及他们。

Answer 1

添加顶部属性 0

.overlay{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:999;
}