Heim >Web-Frontend >HTML-Tutorial >Was Sie nicht über die Verwendung von Z-Index wissen
Was Sie nicht über die Verwendung von Z-Index wissen
- WBOYOriginal
- 2016-09-28 08:38:232043Durchsuche
Bevor wir mit dem heutigen Inhalt beginnen, werfen wir einen Blick auf den folgenden Code:
<style type="text/css"><br> #div1,#div2{<br> width:200px;<br> height:200px;<br> background-color:red;<br> position: relative;<br> z-index:1;<br> }<br> #div2{<br> background-color:green;<br> z-index:0;<br> }<br> #div1_1,#div2_1{<br> width:100px;<br> height:100px;<br> background-color:black;<br> }<br> #div1_1{<br> position:relative;<br> z-index:-100;<br> left:80px;<br> top:140px;<br> }<br> #div2_1{<br> background-color:yellow;<br> z-index:999;<br> position: relative;<br> left:160px;<br> top:-50px;<br> }<br><br></style>
<body><br><div id="div1"><br> 我是div1<br> <div id="div1_1"><br> 我是div1_1<br> </div><br></div><br><div id="div2"><br> 我是div2<br> <div id="div2_1"><br> 我是div2_1<br> </div><br></div><br></body>
'
???Entschuldigung? Warum ist der Z-Index-Wert von div2_1 999 immer noch niedriger als die Elementebene von div1? Der Z-Index-Wert von div1_1 beträgt -100, ist aber immer noch höher als div1? Seien Sie nicht ängstlich, hören Sie mir einfach langsam zu.
Wenn wir mit etwas nicht vertraut sind, müssen wir zunächst drei Dinge verstehen: 1. Was ist das für ein Ding? 2. Was ist der Nutzen? 3. Wie benutzt man?
Befolgen wir diese drei Schritte, um das Z-Index-Attribut zu erklären. Erstens, erstens und zweitens, was ist das für ein Ding? Der Z-Index ist eigentlich ein häufiges Attribut in CSS. Es wird hauptsächlich verwendet, um die Stapelreihenfolge von Elementen festzulegen. Wenn Ihre Webseite drei einander überlappende Elemente enthält, müssen diese von unten nach oben angezeigt werden Eine bestimmte Reihenfolge. Was sollten Sie tun? Ja, denn in der Webentwicklung sind wir im Allgemeinen zweidimensional und CSS führt dieses Attribut ein, um uns beim Layout zu helfen.
Zweitens wollen wir sehen, wie man dieses Ding verwendet. Lassen Sie mich Ihnen zunächst einige konzeptionelle Dinge vorstellen:
1. Das Z-Index-Attribut legt die Stapelreihenfolge von Elementen mit einer höheren Stapelreihenfolge fest, die immer vor Elementen mit einer niedrigeren Stapelreihenfolge stehen
2. Bei gleichgeordneten Elementen überschreiben standardmäßig oder im Fall von position:STATIC die Elemente am Ende des Dokumentflusses das vorherige
3. Wenn bei Elementen derselben Ebene die Position nicht statisch ist und ein Z-Index vorhanden ist, überdeckt das Element mit einem größeren Z-Index das Element mit einem kleineren Z-Index und je größer der Z-Index , desto höher ist die Priorität
4. Unter ie6/7 ist die Position nicht statisch und der Z-Index ist nicht vorhanden, daher ist der Z-Index 0. In anderen Browsern ist der Z-Index automatisch
5. Elemente, deren Z-Index automatisch ist, nehmen nicht am Vergleich hierarchischer Beziehungen teil. Von der Aufwärtsdurchquerung bis zu diesem Punkt nehmen Elemente, deren Z-Index nicht automatisch ist, am Vergleich teil
Hinweis: Wenn Sie position:static festlegen, ist das Element dasselbe, als ob Sie die Position nicht festgelegt hätten, und es hat keinen Einfluss auf die Stapelebene (die folgenden Beispiele erklären es nicht mehr und die nachfolgende Position). wird standardmäßig nicht statisch sein)
Lassen Sie mich das anhand einiger Beispiele veranschaulichen:
1. Die Stapelreihenfolge der Elemente ohne Z-Index und Position:
Die Stapelregel der beiden oben genannten Divs lautet, dass die Stapelebene hinten höher ist als die Vorderseite. Das heißt, wenn Sie einen negativen Rand verwenden, um Div2 nach Div1 zu verschieben, wird der überlappende Teil stattdessen als Div2 angezeigt von div1. Dann werden einige Schüler fragen: Was ist, wenn ich nach Div2 ein Div3 hinzufüge? Unabhängig davon, wie viele Divs Sie hinter sich haben, ist das Niveau das gleiche wie bei Div2 und nicht höher als Div2
2. Wenn die Position beteiligt ist, aber der Z-Index nicht beteiligt ist
zB:
<style type="text/css"><br> /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a{<br> position:relative;<br> }<br><br></style>
<body><br><div id="a"><br> 我是A<br></div><br><div id="b"><br> 我是B<br></div><br></body><br>然后你看到的是这样的情况：
这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面<br>，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：
<style type="text/css"><br> /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a_1{<br> width:50px;<br> height:50px;<br> background-color:blue;<br> position:relative;<br> left:80px;<br> top:50px;<br> }<br><br> </style><br></head><br><body><br><div id="a"><br> 我是A<br> <div id="a_1"><br> 我是A的子DIV<br> </div><br></div><br><div id="b"><br> 我是B<br></div><br></body>
3.有z-index参与的情况：<br>1.简单的堆叠：<br>#div1{<br>position:relative;<br>z-index:1;<br>}
#div2{<br>position:relative;<br><br>}
#div1{<br>position:relative;<br>z-index:0;<br>}
<div id="div1"></div><br><div id="div2"><//div><br><div id="div3"></div><br>此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。<br><br>2.相对复杂的堆叠（z-index的从父原则）：<br> 意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！
Abschließend möchte ich betonen: Zweitens darf der Wert des Z-Index eine Ganzzahl ohne px sein. Viele Anfänger sind es gewohnt, Breite und Höhe zu schreiben Der Z-Index sollte px sein. Zweitens muss er mit der Position verwendet werden. Unabhängig davon, ob der Wert der Position fest, absolut oder relativ ist, ist er auf der Ebene gleich, auf der der Wert statisch ist Es wird der Pegel ohne Position eingestellt.
Zusammenfassend lässt sich sagen, dass das obige Beispiel sehr chaotisch erscheint und ich wirklich nicht weiß, wie ich es in tatsächlichen Situationen anwenden soll. Schauen Sie sich aus eigener Erfahrung zunächst an, ob es eine Position gibt. Wenn keine Position vorhanden ist, schauen Sie sich die Hierarchie der Reihe nach an. Wenn eine Position vorhanden ist, prüfen Sie, ob ein Z-Index vorhanden ist. Achten Sie beim Festlegen des Z-Index-Werts für das untergeordnete Element des übergeordneten Elements darauf, ob für das übergeordnete Element ein Z-Index festgelegt ist Das übergeordnete Element wirkt sich auf die Ebene des untergeordneten Elements aus. Dies ist sehr wichtig und auch der häufigste Fehler, den wir machen. Wenn es nicht funktioniert, wenn Sie den Z-Index-Wert eines Elements auf den Maximal- oder Minimalwert setzen, können Sie auch nachsehen, ob Sie das übergeordnete Prinzip des Z-Index nicht genau verstanden haben. Lassen Sie mich abschließend Sprechen Sie über etwas, das nichts mit diesem Artikel zu tun hat. Es wird empfohlen, dass Sie sich die Zeit nehmen, etwas über die Vererbung von CSS zu lernen.
<br><br>