CSS盒子隐藏/显示后再最上层的实现代码

实现CSS盒子隐藏/显示后再最上层，可以使用position属性和z-index属性。

具体步骤如下：

确定要隐藏/显示的盒子，如下例中的一个div标签：

<div class="box">
  这是一个要隐藏/显示的盒子。
</div>

在CSS中设置盒子的position属性为absolute或fixed，这样可以使盒子脱离文档流，不占用其他元素的空间。

.box {
  position: absolute;
  /* 或者是 position: fixed; */
}

使用z-index属性来控制盒子显示在其他元素的前面或后面，数值越大，显示的层级就越高。可以将z-index属性设置为一个大于其他元素的数值，如下例中的999。

.box {
  position: absolute;
  /* 或者是 position: fixed; */
  z-index: 999;
}

完整代码及演示如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      position: relative;
      z-index: 1;
    }

    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: blue;
      z-index: 999;
      display: none;
    }

    .show {
      display: block;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="box">
      这是要隐藏/显示的盒子。
    </div>
  </div>
  <button id="btn">显示盒子</button>
  <script>
    var btn = document.getElementById('btn');
    var box = document.querySelector('.box');
    btn.addEventListener('click', function() {
      box.classList.toggle('show');
    });
  </script>
</body>
</html>

上述代码中，我将要隐藏/显示的盒子添加在一个带有position: relative属性的父元素中，这是因为z-index属性只有在父元素的范围内生效。

在CSS中，将.box元素的z-index属性值设置为999，保证其在其他元素之上。而display属性初始化为none，表示盒子最初是隐藏的。我给按钮添加了一个点击事件，当点击按钮时，会在.box元素上切换.show类，从而实现盒子的显示/隐藏。

另一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 150px;
      background-color: white;
      box-shadow: 0px 0px 10px #999;
      z-index: -1;
      transition: all 0.5s ease-in-out;
    }

    .hidden {
      opacity: 0;
      z-index: -1;
    }

    .show {
      opacity: 1;
      z-index: 999;
    }

    .btn {
      position: fixed;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
  <button class="btn" id="show-btn">显示盒子</button>
  <button class="btn" id="hide-btn">隐藏盒子</button>
  <div class="box hidden">
    这是要隐藏/显示的盒子。
  </div>
  <script>
    var showBtn = document.getElementById('show-btn');
    var hideBtn = document.getElementById('hide-btn');
    var box = document.querySelector('.box');
    showBtn.addEventListener('click', function() {
      box.classList.remove('hidden');
      box.classList.add('show');
    });
    hideBtn.addEventListener('click', function() {
      box.classList.remove('show');
      box.classList.add('hidden');
    });
  </script>
</body>
</html>

在这个示例中，我将.box元素的z-index属性初始化为-1，使其在其他元素下面。当点击show-btn按钮时，我将.box元素的opacity属性从0更改为1，并将其z-index属性更改为999，使其位于页面顶部。同样，当点击hide-btn按钮时，我将.box元素的opacity属性从1更改为0，并将其z-index属性更改回-1，使其不可见。我在样式表中使用了过渡动画，使.box元素的显示/隐藏更平滑。

以上两个示例都可以实现CSS盒子隐藏/显示后再最上层的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS盒子隐藏/显示后再最上层的实现代码 - Python技术站

CSS盒子隐藏/显示后再最上层的实现代码

相关文章