Properti HTML DOM Style ZIndex
gaya Objects Definisi dan Penggunaan
ZIndex set properti atau mengembalikan urutan susun dari elemen positioning.
Elemen memiliki urutan menumpuk lebih tinggi (1) akan selalu berada di depan lebih rendah susun urutan (0) elemen.
Tip: elemen positioning adalah atribut posisi elemen diatur: relatif (relative), mutlak (absolut) atau tetap (fixed).
tatabahasa
Pengaturan properti ZIndex:
Object.style.zIndex="auto|number|inherit"
Kembali sifat ZIndex:
Object.style.zIndex
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器决定元素的堆叠顺序（基于元素在文档中的顺序）。 |
| number | 一个定义元素堆叠顺序的整数。可使用负值。 |
| inherit | zIndex 属性的值从父元素继承。 |
Dukungan Browser
Semua browser utama mendukung properti ZIndex.
Tips dan Catatan
Tip: Jika Anda ingin membuat elemen yang tumpang tindih, properti ini sangat berguna.
contoh
contoh
Ubah <img> elemen dalam urutan menumpuk:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#img1{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script>
function changeStackOrder(){
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>这是一个标题</h1>
<img id="img1" src="bulbon.gif" width="100" height="180">
<input type="button" onclick="changeStackOrder()" value="修改堆叠顺序">
<p>默认 z-坐标是 0，Z-坐标 -1优先级较低。 </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#img1{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script>
function changeStackOrder(){
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>这是一个标题</h1>
<img id="img1" src="bulbon.gif" width="100" height="180">
<input type="button" onclick="changeStackOrder()" value="修改堆叠顺序">
<p>默认 z-坐标是 0，Z-坐标 -1优先级较低。 </p>
</body>
</html>
Coba »
gaya Objects