我们都知道z-index是表示谁压着谁的意思，那么在实际开发中如何使用z-index呢？
下面我们举一个页面导航的例子
运行结果：
大家可以看到页面的最上方是一个导航条，内容部分是2张同样的图片，我们在第一行图片下方设置了一个链接。由css代码我们可以看到导航nav设置的固定定位，按钮链接设置了相对定位，我们知道设置定位的元素，会出现后面的元素压住前面的元素。当我们向上滑动页面，可以看到如下图的现象：
内容为按钮的链接会穿过导航条，这显然是不正确的，原因就会因为链接会压住导航条，那该如何解决这种问题呢？
其实很简单，只需要设置导航条nav的z-index值即可，我们可以给他设置一个很大的z-index值，这样就可以压住其他元素了。为.nav添加样式
z-index: 99999999;
这样就不会出现刚才的现象了。
