如何调整CSS以使关闭按钮在正确的位置显示？

Question

在我的网站上[现在位于：http://gatecybertech.com/test，但稍后将移至http://gatecybertech.com]，如果我单击，可以单击右上角的“视频”链接并转到视频部分在视频上播放它时，iFrame将打开，在右上角有一个关闭按钮，它的位置不太正确，如何解决？

CSS看起来像这样：

   #modal
  {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #modal .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }

html看起来像这样：

<div id="modal" tabindex="-1">
  <div class="content">
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
    <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
      <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
    </div>
  </div>
</div>

Answer 1

我认为只是对代码进行一些更改，请尝试一下：

  #modal
  {
/*    display: none; */
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
  position: relative;
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  #modal .content .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
    #modal .content .close a{
        font-size:25px;
    }

  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }

   <div id="modal"  class="black_overlay" onclick="closeLightBox()"  tabindex="-1">
   <div class="content">
   <div class="close">
      <a  onclick = "return close_iFrame();">&times;</a>
    </div>
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>


</div>