HTML-DOM Stil zIndex Eigenschaft
Definition und Verwendung
zIndex Eigenschaftssätze oder gibt die Stapelreihenfolge der Positionierungselemente.
Element hat eine höhere Stapelreihenfolge (1) wird vor dem unteren Stapel Ordnung (0) element immer sein.
Tipp: ein Positionierungselement ist die Position Attribut des Elements gesetzt: relative (relativ), absolut (absolut) oder fest (fest).
Grammatik
Einstellen zIndex Eigenschaften:
Object.style.zIndex="auto|number|inherit"
Zurück zIndex Eigenschaften:
Object.style.zIndex
值 | 描述 |
---|---|
auto | 默认。浏览器决定元素的堆叠顺序(基于元素在文档中的顺序)。 |
number | 一个定义元素堆叠顺序的整数。可使用负值。 |
inherit | zIndex 属性的值从父元素继承。 |
Browser-Unterstützung
Alle gängigen Browser unterstützen zIndex Eigenschaft.
Tipps und Hinweise
Tipp: Wenn Sie überlappende Elemente erstellen möchten, ist diese Eigenschaft sehr nützlich.
Beispiele
Beispiele
Ändern Sie <img> Element in der Stapelreihenfolge:
<!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>
Versuchen »
Style - Objekte