使用 CSS 中的 z-index 属性在图层中堆叠元素

使用 CSS Z-Index 属性，开发人员可将元素堆叠在彼此之上。Z-Index 可以具有正值或负值。

注意 − 如果重叠的元素未指定 z-index，则该元素将显示在文档中最后提到的元素上。

以下是实现 z-index 属性的一些示例。

z-index

在此示例中，我们设置了正 z-index 值来堆叠 −

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .dropbtn {
         background-color: rgb(76, 78, 175);
         color: white;
         padding: 16px;
         font-size: 16px;
         border: none;
         cursor: pointer;
      }
      .dropbtn:hover, .dropbtn:focus {
         background-color: #4f3e8e;
      }
      .searchField {
         box-sizing: border-box;
         font-size: 16px;
         padding: 14px 20px 12px 45px;
         border: none;
         border-bottom: 1px solid #ddd;
      }
      .searchField:focus {outline: 3px solid #ddd;}
      .dropdown {
         position: relative;
         display: inline-block;
      }
      .dropdownList {
         display: none;
         position: absolute;
         background-color: #f6f6f6;
         min-width: 230px;
         overflow: auto;
         border: 1px solid #ddd;
         z-index: 1;
      }
      .dropdownList a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
      }
      .dropdown a:hover {background-color: #ddd;}
      .show {display: block;}
   </style>
</head>
<body>
   <h1>Search/filterText Dropdown Example</h1>
   <div class="dropdown">
      <button class="dropbtn" onclick="showDropList()">Dropdown</button>
      <div id="myDropdown" class="dropdownList">
         <input type="text" placeholder="Search.." class="searchField">
         <a href="#">Cow</a>
         <a href="#">Cat</a>
         <a href="#">Dog</a>
         <a href="#">Giraffe</a>
         <a href="#">Lion</a>
         <a href="#">Leopard</a>
         <a href="#">Cheetah</a>
      </div>
   </div>
   <script>
      function showDropList(){
         let dropDiv = document.querySelector('.dropdownList');
         if(dropDiv.style.display==="block"){
            dropDiv.style.display = "";
         } else {
            dropDiv.style.display = "block";
         }
      }
      document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
      function filterDropdown() {
         var inputSearch, filterText, ul, li, links, i,div;
         inputSearch = document.querySelector(".searchField");
         filterText = inputSearch.value.toUpperCase();
         div = document.getElementById("myDropdown");
         links = div.getElementsByTagName("a");
         for (i = 0; i < links.length; i++) {
            txtValue = links[i].textContent || links[i].innerText;
            if (txtValue.toUpperCase().indexOf(filterText) > -1) {
               links[i].style.display = "";
            } else {
               links[i].style.display = "none";
            }
         }
      }
   </script>
</body>
</html>

负 z-index

我们来看另一个带有负值的 z-index 属性示例 −

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         margin: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
      }
      div{
         margin: auto;
         position: absolute;
         top:0;
         left: 0;
         right: 0;
         bottom: 0;
      }
      div:first-child {
         background-color: orange;
         width: 270px;
         height: 120px;
         z-index: -2;
      }
      div:last-child {
         width: 250px;
         height: 100px;
         z-index: -1;
         background-color: turquoise;
      }
   </style>
</head>
<body>
   <div></div>
   <p>Variables are the reserved memory locations to store values. This means that when you create a variable you reserve some space in memory.............</p>
   <div></div>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

叠加层的 Z-index

要对图像创建叠加效果，我们使用了 z-index 属性 −

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial;
      }
      * {
         box-sizing: border-box;
      }
      .showBtn {
         background: #008b0c;
         border: none;
         color:white;
         padding: 10px 15px;
         font-size: 20px;
         cursor: pointer;
         opacity: 0.8;
      }
      .showBtn:hover {
         opacity: 1;
      }
      .overlay {
         height: 100%;
         width: 100%;
         display: none;
         position: fixed;
         z-index: 1;
         top: 0;
         left: 0;
         background-color: rgba(0, 0, 0, 0.747);
      }
      .overlay .hideBtn {
         position: absolute;
         top: 20px;
         right: 45px;
         font-size: 60px;
         cursor: pointer;
         color: rgb(255, 0, 0);
         opacity: 0.8;
      }
      .overlay .hideBtn:hover {
         opacity: 1;
      }
      .overlay input[type=text] {
         padding: 15px;
         font-size: 17px;
         border: none;
         float: left;
         width: 80%;
         background: white;
      }
      .overlay input[type=text]:hover {
         background: #f1f1f1;
      }
      .overlay button {
         float: left;
         width: 20%;
         padding: 15px;
         background: rgb(54, 21, 241);
         font-size: 17px;
         border: none;
         color:white;
         cursor: pointer;
         opacity: 0.8;
      }
      .overlay button:hover {
         opacity: 1;
      }
   </style>
</head>
<body>
   <div class="overlay" >
      <span class="hideBtn">×</span>
      <div class="searchBar">
         <form >
            <button type="submit">Close Overlay</button>
         </form>
      </div>
   </div>
   <h1>Overlay Effect Example</h1>
   <button class="showBtn">Turn Overlay On</button>
   <h2>Click on the above button to try overlay effect</h2>
   <script>
      document.querySelector('.hideBtn').addEventListener('click',hideSearch);
      document.querySelector('.showBtn').addEventListener('click',showSearch);
      function showSearch() {
         document.querySelector('.overlay').style.display = "block";
      }
      function hideSearch() {
         document.querySelector('.overlay').style.display = "none";
      }
   </script>
</body>
</html>

更新于： 27-Dec-2023

234 次浏览

开启你的 职业生涯

完成教程即可获得认证

开始学习
广告