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