时间戳

首页 > 解决方案 > 固定位置模态未完全隐藏

html - 固定位置模态未完全隐藏

问题描述

我试图.menu通过将 z-index 设置为 -1 来使用 z-index 来隐藏固定位置的模态。然而，z-index 只是部分隐藏了，模态的一部分仍然显示在另一个 HTML 元素上方.main-content__description，它是相对定位的。我不确定我哪里出错了，因为我的模态确实有一个指定的位置。

这是页面的图像。如您所见，有一个灰色的部分向外窥视，它是模态的一部分：html-page：

在此处输入图像描述

这是代码：

    $(document).ready(function() {
      $('.main-content__divider').slideDown(1000, () => {
        $(this).css('display', 'inline-block');
      });
    })
    * {
      box-sizing: border-box;
    }

    body {
      background-color: #000000;
      color: #ffffff;
      margin: 0;
      padding: 0;
    }

    .main {
      position: relative;
      height: 100vh;
      display: inline-block;
      width: 100%;
    }

    .main>div:first-child {
      position: absolute;
      right: 1rem;
      top: 0;
    }

    .main-navigation,
    .main-slideshow {
      padding: 1rem;
    }

    .main-navigation:hover {
      cursor: pointer;
    }

    .main-navigation div {
      width: 1.5rem;
      margin: 0.5rem auto;
      border-bottom: 3px solid #000000;
    }

    .main-slideshow div {
      width: 1rem;
      height: 1rem;
      margin: 1.5rem auto;
      border: 2px solid #000000;
      border-radius: 50%;
    }

    .main-image {
      width: 100%;
      height: 75%;
      background: #ffffff;
    }

    .main-content {
      position: relative;
      height: 25%;
    }

    .main-content__description {
      position: absolute;
      display: inline-block;
      left: 45%;
      bottom: 30%;
      height: 40vh;
      width: 55%;
      background: red;
      padding: 0 1rem;
    }

    .main-content__divider {
      position: absolute;
      display: none;
      background: blue;
      left: 40%;
      top: -90%;
      height: 40vh;
      width: 0.5rem;
    }

    .main-content__title {
      position: absolute;
      display: inline-block;
      left: 5%;
      bottom: 30%;
      height: 40vh;
      width: 30%;
      text-align: right;
      background: green;
    }

    .menu {
      position: fixed;
      height: 100vh;
      width: 20%;
      top: 0;
      right: 0;
      text-align: center;
      background: gray;
      z-index: -1;
      /* display: none; */
    }

    .menu>div:first-child,
    .menu>div:last-child {
      display: inline-block;
      width: 10%;
      height: 80%;
      background: #000000;
    }

    .menu-divider {
      display: inline-block;
      background: #ffffff;
      width: 0.5rem;
      height: 80%;
    }
    <html>

    <head>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </head>

    <body>
      <main>
        <div class="main">
          <div>
            <div class="main-navigation">
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="main-slideshow">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
          <div class="main-image">

          </div>
          <div class="main-content">
            <div class="main-content__title">
              <h1>Art Galleria</h1>
            </div>
            <div class="main-content__divider"></div>
            <div class="main-content__description">
              <h1>Art Gallery</h1>
            </div>
          </div>
        </div>
        <div class="menu">
          <div></div>
          <div class="menu-divider"></div>
          <div></div>
        </div>
      </main>
    </body>

    </html>

如何确保模态完全隐藏而不将其位置更改为绝对以外的其他位置？

标签： htmlcss

解决方案

推荐阅读