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>

效果如下：

多个img叠加用css样式控制即可：

如果是背景的话，background 属性可以指定多个图片。

示例如下：

background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

url("haoroomsCSS2_s.jpg") 200px 0 no-repeat

就同时指定了两个图片，两个图片的位置可以通过后面的位置参数调整。

如果是img元素，可以通过给img指定绝对定位的样式，通过绝对定位让两个img按照

要求的方式重叠。

比如：

img#id1 {position:absolutetop:0left:0width:100%display:block}

mg#id2 {position:absolutetop:20pxleft:0width:100%display:block}

如果要使用绝对定位，img的父元素的样式需要加上 position:relative

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

html z-index什么意思