html中body设置zindex,CSS z-index用法及代码示例

z-index属性用于在z轴上(即在屏幕内或屏幕外)移动元素。如果元素彼此重叠，则用于定义元素的顺序。

用法:

z-index:auto|number|initial|inherit;

属性值：

auto:堆栈顺序等于父顺序(默认)。

number:堆叠顺序取决于数量。

initial：将属性设置为其默认值。

inherit:从父元素继承属性。

范例1：

z-index Property

img {

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

h1,

p {

background-color:green;

}

GeeksforGeeks

    

"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"

width="400" height="150">

This example shows the use of z-index property.

输出：

范例2：

z-index Property

img {

position:absolute;

left:0px;

top:0px;

z-index:+1;

}

h1,

p {

background-color:green;

}

GeeksforGeeks

    

"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"

width="400" height="150">

This example shows the use of z-index property.

输出：

在示例1中，z-index设置为-1，因此，图像出现在文本后面，而在示例2中，当z-index设置为+1时，图像隐藏了文本。

支持的浏览器：下面列出了z-index属性支持的浏览器：

谷歌浏览器1.0

边12.0

Firefox 1.0

Opera 4.0

苹果Safari 1.0