In CSS können Sie das Attribut z-index verwenden, um die Stapelreihenfolge von Elementen mit einer höheren Stapelreihenfolge festzulegen ist „z- index:numeric;“, negative Werte sind zulässig.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie das Z-Index-Attribut verwenden, um die Ebene festzulegen. Das Attribut „z-index“ legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge. (Z-Index funktioniert nur bei positionierten Elementen).
Studenten, die sich mit dem Seitenlayout befasst haben, sollten mit dem Z-Index-Attribut bestens vertraut sein. Z-Index ist ein spezielles Attribut für die Webseitenanzeige. Da das vom Monitor angezeigte Muster eine zweidimensionale Ebene ist, verfügt es über eine x-Achse und eine y-Achse zur Darstellung des Positionsattributs. Um das dreidimensionale Konzept wie die Überlagerungsreihenfolge der oberen und unteren Schichten von Anzeigeelementen darzustellen, wird das Z-Index-Attribut eingeführt, um den Unterschied auf der Z-Achse darzustellen. Gibt die obere und untere dreidimensionale Beziehung eines Elements in der Überlagerungssequenz an. Elemente mit einem größeren Z-Indexwert werden Elementen mit einem kleineren Z-Indexwert überlagert. Bei positionierten Objekten, für die diese Eigenschaft nicht angegeben ist, befinden sich Objekte mit positiven Z-Index-Werten darüber und Objekte mit negativen Z-Index-Werten darunter. Einfache Demonstration<div style="width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
Das zweite Div deckt das erste Div ab, fügen Sie das Z-Index-Attribut zum zweiten hinzu
<div style="width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>
<div style="width:200px;height:200px;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>
<div style="position:relative;width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
<div style="position:relative;top:50px;width:200px;height:200px;"></div> <div style=" width:100px;height:100px;"><div>
Wenn der Z-Index des übergeordneten Elements ungültig ist (nicht positioniert oder mit dem Standardwert verwendet) , dann wird die Z-Index-Einstellung des positionierten untergeordneten Elements wirksam.
<div style="position:relative;width:200px;height:200px;z-index:10;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div>
<div style="position:relative;width:200px;height:200px;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div>
Das obige ist der detaillierte Inhalt vonSo richten Sie eine hierarchische CSS-Beziehung ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!