Heim  >  Artikel  >  Web-Frontend  >  Was ist das Z-Index-Attribut?

Was ist das Z-Index-Attribut?

藏色散人
藏色散人Original
2021-04-19 11:51:5120445Durchsuche

Das Z-Index-Attribut ist ein Attribut in CSS, das zum Festlegen der Stapelreihenfolge von Elementen verwendet wird. Elemente mit einer höheren Stapelreihenfolge stehen immer vor Elementen mit einer niedrigeren Stapelreihenfolge und Elemente können einen negativen Z-Index-Attributwert haben .

Was ist das Z-Index-Attribut?

Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, CSS3-Version. Das Attribut „z-index“ legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.

Hinweis: Elemente können negative Z-Index-Attributwerte haben.

Hinweis: Der Z-Index funktioniert nur bei positionierten Elementen (z. B. position:absolute;)!

Beschreibung

Dieses Attribut legt die Position eines positionierten Elements entlang der Z-Achse fest, die als die Achse definiert ist, die sich vertikal zum Anzeigebereich erstreckt. Wenn es eine positive Zahl ist, ist sie näher am Benutzer, und wenn es eine negative Zahl ist, ist sie weiter vom Benutzer entfernt.

Standardwert: auto

Vererbung: nein

Version: CSS2

JavaScript-Syntax: object.style.zIndex="1"

Mögliche Werte

auto Standard. Die Stapelreihenfolge entspricht der des übergeordneten Elements.

Nummer legt die Stapelreihenfolge der Elemente fest.

inherit gibt an, dass der Wert des Z-Index-Attributs vom übergeordneten Element geerbt werden soll.

【Empfohlenes Lernen:

CSS-Video-Tutorial

Beispiel

Legen Sie den Z-Index des Bildes fest:

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>

Effekt:

Das obige ist der detaillierte Inhalt vonWas ist das Z-Index-Attribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn