CSS HTML Z-Index

一、z-index是什么？

z-index是CSS中的一个属性，它可以设置元素的堆叠顺序，即决定一个元素在另一个元素之上或之下。默认情况下，HTML元素遵循”后来居上”的原则，即最后一个元素覆盖在前面的元素之上。

但是，当页面中有多个元素重叠在一起时，可能会出现元素的显示顺序不符合期望。这时候，就可以通过z-index来手动调整元素的堆叠顺序。

二、z-index的用法

z-index属性的用法非常简单，只需要在CSS样式中指定z-index的值即可。值越大，元素就越靠上。如果两个元素的z-index相同，则按照它们在HTML中出现的先后顺序来决定显示顺序。

以下是一个基本的z-index用法示例：

    <div class="box box1"></div>
    <div class="box box2"></div>

    .box1 {
      background-color: blue;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .box2 {
      background-color: red;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50px;
      top: 50px;
      z-index: 2;
    }

上面的示例中，box2会显示在box1之上，因为box2的z-index值比box1大。

三、应用场景

z-index常用于以下场景：

1. 弹出框

在页面上弹出的一些提示框或模态框，它们需要在页面上居于最上层。使用z-index就可以轻松实现这一点。

    <div class="overlay"></div>
    <div class="dialog">
      <h2>This is a dialog</h2>
      <p>Hello world!</p>
    </div>

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }
    .dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      z-index: 10000;
    }

上面的示例中，overlay用来覆盖整个页面，dialog则居于它的上面。通过指定不同的z-index值，让它们实现了层叠的效果。

2. 导航栏

网站的导航栏通常需要一直显示在页面最上方或最下方。这时可以使用z-index属性设置导航栏的层叠顺序，让它始终在页面的最上面。

    <div class="header"></div>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: white;
      z-index: 10000;
    }
    .menu {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: black;
      z-index: 9999;
    }

上面的示例中，header和menu分别指定了不同的z-index值，让它们在页面的上下两端呈现不同的层叠效果。

四、总结

z-index是CSS中非常重要的一个属性，它可以通过设置元素的层叠顺序，实现多个元素之间的层叠效果。在实际开发中，我们常常需要对一些页面元素进行层叠调整。熟练掌握z-index的用法，可以帮助我们实现更加复杂的页面布局和交互效果。