什么时候使用z-index?

我们都知道z-index是表示谁压着谁的意思,那么在实际开发中如何使用z-index呢?

下面我们举一个页面导航的例子

运行结果:

大家可以看到页面的最上方是一个导航条,内容部分是2张同样的图片,我们在第一行图片下方设置了一个链接。由css代码我们可以看到导航nav设置的固定定位,按钮链接设置了相对定位,我们知道设置定位的元素,会出现后面的元素压住前面的元素。当我们向上滑动页面,可以看到如下图的现象:

内容为按钮的链接会穿过导航条,这显然是不正确的,原因就会因为链接会压住导航条,那该如何解决这种问题呢?

其实很简单,只需要设置导航条nav的z-index值即可,我们可以给他设置一个很大的z-index值,这样就可以压住其他元素了。为.nav添加样式

z-index: 99999999;

这样就不会出现刚才的现象了。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,835评论 1 88
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 138,226评论 20 591
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 3,211评论 0 13
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 382评论 0 1
  • 夜幕降临华灯初上时候,历时四小时终于落地舟山。韩姐全家的盛情款待,让我格外舒心。 “对了吉祥,你去过普陀山吗?”大...
    吉祥在路上阅读 76评论 0 0