Stapeln einer Ecke eines Div unter einem anderen Div
Ich versuche, die Ecke des blauen Quadrats div unter das orange div zu setzen. Ich habe alles versucht, was ich weiß:
z-index funktioniert nicht, weil mein div in ein anderes div eingepackt ist, und wenn ich es auspacke, habe ich Probleme mit der Positionierung von acht Elementen.
Kann mir jemand sagen, wie ich das mache? Oder wie benutzt man den Z-Index für alle Elemente?
Was ich habe:
Was ich brauche:
Mein bisheriger HTML-Code:
3 Antworten
Dies kann mithilfe von CSS-3D-Transformationen erreicht werden. Erstellen Sie zuerst einen äußeren Container und verpacken Sie Ihren HTML-Code darin:
%Vor% Der äußere Container hat einen großen perspektivischen Wert, damit die Elemente nicht anders aussehen, wenn wir sie drehen. Es verwendet transform-style: preserve-3d; , um die Standard-Stacking-Engine zu überschreiben und alles in einem 3D-Kontext zu stapeln. Dies stellt sicher, dass alles richtig gestapelt wird.
Um Ihre Elemente richtig zu überlappen, geben Sie jedem Element eine kleine Drehung von 5 Grad um die Y-Achse:
%Vor%Ihre alternativen Elemente erhalten die entgegengesetzte Wendung:
%Vor%Das Ergebnis ist eine Szene, die in 3D Sinn macht und genau so stapelbar ist wie in der physischen Welt.
Working, Live-Beispiel:
JSFiddle Version: Ссылка
Einfache Lösung dieses Rätsels ist das Duplizieren der letzten div und die Deckkraft für ihn
Hier HTML und CSS Code:
%Vor%Und zum ersten CSS diesen Teil des CSS-Codes hinzugefügt:
%Vor%Das funktioniert großartig =) und ändert sich mit der Größe der Fenster Hier Foto
Sie könnten das orange Quadrat teilweise entweder durch Festcodierung oder durch Verwendung einer JS-Bibliothek duplizieren. Setzen Sie dann einen höheren Z-Index als das blaue Quadrat darauf. Wenn Sie es korrekt zuschneiden, überlappt es nicht das rote Quadrat.
Das ist keine perfekte Lösung und verursacht andere Probleme, d. h. wenn der Text die Grenzen des duplizierten und ausgeschnittenen Elements überlappt.
Diese Technik wird auch in älteren Versionen von Photoshop verwendet, in denen keine 3D-Elemente erstellt werden konnten.