html z-index什么意思_随笔

首先说，z-index不是HTML中的标签,而是css中的一个属性。

z-index 属性的意思是：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。简单的说就是利用这个属性可以把一段文字置于一张图片之上，或者把图片置于文字之上，只要设置好合适的优先级就可以了。

举个实例可以清楚的说明白这个标签，例如：

<html>

<head>

img.x

{

position:absolute

left:0px

top:0px

z-index:-1

}

</style>

</head>

<body>

<h1>这是一个标题</h1>

<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

</body>

</html>

效果如下：

1、用css的z-index的属性就可以实现。首先新建一个html文件，在文件中写入一个div容器和一个图片：

2、然后在上方设置它们的样式，这里给div设置成绝对定位，图片设置成相对定位，然后设置一下它们的z-index属性，该属性用来显示元素的上下层的叠加顺序，数值越大表示的层级越高，但是只有在有定位的情况下该属性才会生效。最后设置一下div的背景颜色方便观察效果：

3、最后打开浏览器查看效果，div是在图片上面的。以上html中就是把背景图片置于最低层的方法：

父元素的z-index值比子元素大，子元素就在父元素的下面，z-index值大会在上层，示例代码如下:

html部分：

</div>

2.css部分：

#container { position: relative }

#a1 { position: absolute top: 100px left: 210px width: 200px height: 200px background-color: yellow z-index: 20 }

#a2 { position: absolute top: 50px left: 160px width: 200px height: 200px background-color: green z-index: 10 }

说明：两个a被完全的定位，背景色为黄色的a1拥有z-index属性值20，而背景色为绿色的a2拥有z-index属性值10，唯一的区别在于背景色为黄色的a1被放在了一个定义了属性position:relative的div中，并且在文档源代码中位前。

3.效果图如下：

注意事项：z-index只能在定位中起作用。

欢迎分享，转载请注明来源：内存溢出

html z-index什么意思