html中index属性怎么用,浅谈CSS中z-index属性的用法

本篇文章来给大家介绍一下CSS中z-index属性的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

写css z-index的时候经常会出现很多莫名其妙的问题，下面对z-index属性做彻底的剖析，本文参考了《一个css中z-index的用法》，并做了很多demo，方便了解z-index的用法.

一、z-index是什么

z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。为了更清晰的描述Z-index是如何工作的，这张图片夸大展示了层叠元素在视觉位置上的关系。

二、自然层叠顺序demo

为了更好的表现出最基本的层叠，看下面的demo，地址 http://jsbin.com/yezisino/1/edit

html代码：

css：.blue,.green,.red{

width:200px;

height:200px;

}

.blue{

background:blue;

}

.green{

background:green;

margin-top:-100px;

margin-left:50px;

}

.red{

background:red;

margin-top:-100px;

margin-left:100px;

}

效果图：

三、验证z-index

为了验证z-index的作用，对上述代码进行修改，实例如下

分别把blue green red的z-index设置为999 99 9，但是看上去好像和之前没什么变化，原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。so 我们继续对css做一些修改：

如图所示，显示的顺序已经按照我们设置的z-index大小展现了

四、多个父元素中子元素的z-index设置

在原基础之上，我们对html和css做一些改动，验证一下父元素不同的情况下 ，子元素设置不同的z-index显示效果

可以很明显的看出，不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.

五、世上本没有z-index

要有这样子的意识：absolute是一个能够独当一面的属性，其使用可以不要relative，当然，也可以不使用z-index。在默认情况下，元素应用了非static的position属性后，其就会有一个隐晦的层级，会居于普通元素之上，无需额外设置z-index属性值。

然而，眼观现实世界，z-index属性值的滥用跟absolute属性值的滥用有的一拼——只要用到绝对定位/相对定位的地方就要设置一个z-index值，以表示自己的地位。结果，N多个z-index之后，网站前端换人之后，页面的z-index层级混乱了，为了让新添加元素上面显示，不惜设置z-index的值为999或是9999等。这就好比球队，人人都想当老大，最后结果是个很有味道的屎。

本文转载自：https://www.cnblogs.com/wuchaofan1993/p/10194732.html

更多前端开发知识，请查阅 HTML中文网 ！！