Z-index属性用法 Css中Z-index的作用

前段时间写了一篇《jQuery回到顶部实例代码 jQuery怎么实现回到顶部》一文，当时虽然是实现了回到顶部的效果，但是在手机移动端还有一点小瑕疵，这段时间在制作zblogphp主题时也做了回到顶部的特效，在写Css时用到z-index属性进行了设置解决了之前的这个小瑕疵，今天主要就是记载z-index属性用法及css中z-index的作用。

首先还是将上次留下的小瑕疵做一个详细说明，具体情况如下：

未使用z-index属性回到顶部展现情况

当页面滚动一定高度时，会显示出回到顶部小图标，其实这个时候是显示出来的，只不过被这篇文章所处的div块给遮挡住了，回到顶部现在位置实在这篇文章的下方。

使用z-index属性回到顶部展现情况

而我打开开发者工具，在回到顶部所控制的Css样式表中添加了z-index:999;属性后，马上就把回到顶部显示到了文章所处的Div上方。

原本在《jQuery回到顶部实例代码 jQuery怎么实现回到顶部》一文中的.top样式内并未添加z-index:999;属性。

下面主要是对Z-index属性做一个详细介绍

z-index定义

在css中z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index用法

根据上述z-index的定义，我们不难发现当我们在css中设置多个有z-index值的块级元素时，值越大的就会在最上层显示出来。以本站为例，文章的那个块级元素，我在css中并未设置z-index属性，而回到顶部中我刚刚添加了z-index的值为999，所以回到顶部那就显示在了文章上层。

z-index使用注意事项

1、当然z-index的值也可以为负数，比如z-index:-1;，z-index的值越小就会被值大的堆叠在下层。

2、z-index用法最重要的是要在定位元素上使用，否则设置的z-index属性将不会生效，这才是z-index用法的重点。

以上就是关于z-index属性用法，以及css中z-index的作用及使用z-index需要注意的事项的记载，希望本文所记载的内容对于搜索到此问题的网友有所帮助。