ATOZ CSS: Unterschied zwischen Translate und Position Relative

Key Takeaways

• Der Hauptunterschied zwischen CSS -Position: Relativ und Transformation: Translate () liegt darin, wie sie das Layout anderer Elemente beeinflussen. Position: Relativ ändert die Position des Elements im Dokumentfluss und wirkt sich möglicherweise andere Elemente aus, während Transformation: Translate () ein Element bewegt, ohne das Layout anderer Elemente zu beeinflussen.
• CSS -Transformation: Translate () wird aufgrund der Verwendung der GPU -Beschleunigung (Graphics Processing Unit) häufig für Animationen bevorzugt, was zu glatteren Animationen und einer besseren Leistung führt. Es ist auch erwähnenswert, dass sich prozentuale Werte zwischen den beiden Methoden unterschiedlich verhalten, wobei Translat den Prozentsatz der berechneten Breite oder Höhe des Elements übersetzt.
• Beide CSS -Position: Relativ und Transformation: Translate () können im selben Element verwendet werden. Diese Kombination ermöglicht eine präzise Platzierung eines Elements auf der Seite und eine weitere Änderung dieser Position. Dies macht sie zu einem leistungsstarken Satz von Werkzeugen für die Platzierung der Elemente.

Dieser Artikel ist Teil unserer Atoz CSS -Serie. Hier finden Sie andere Einträge in die Serie. Sie können das vollständige Transkript und Screencast für das entsprechende Video über Translatex hier anzeigen.

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die jeweils mit einem anderen Buchstaben des Alphabets beginnen. Wir wissen, dass manchmal Screencasts einfach nicht genug sind. In diesem Artikel haben wir also schnelle Tipps zu den Unterschieden zwischen Translate und Position hinzugefügt.

x ist für die Übersetzung und Position

Es gibt eine Reihe von CSS -Eigenschaften zum Platzieren von Elementen auf der Seite. Dazu gehören Layout-Eigenschaften mit großem Bild wie Float, Rand und Polsterung sowie feinkörnigere Werkzeuge wie Position und Translate ().

Auf der Oberfläche, Position: Relativ und Transformation: Translate () scheint auf ähnliche Weise zu funktionieren, aber es gibt einige subtile Unterschiede, die wichtig sind, daher wählen wir das richtige Werkzeug für den Job.

Was ist der Unterschied zwischen Übersetzung und Position: Relativ?

In diesem Beitrag werden wir uns mit einer Reihe von Unterschieden zwischen diesen Methoden zur Elementposition befassen. Lassen Sie mich zunächst klarstellen, was diese verschiedenen Eigenschaften tun.

Wenn wir die Position festlegen: Relativ auf einem Element, können wir sie verwenden, um eine Grenze für absolut Positionierungselemente innerhalb zu erstellen. Dies ist wahrscheinlich die häufigere Verwendung der relativen Positionierung, aber es ist nicht die Verwendung, die wir hier diskutieren.

Wenn wir die Position kombinieren: Relativ mit einem der Offseteigenschaften oben, unten, links oder rechts Das Element wird von seinem ursprünglichen Ort im Layout bewegt, während der Raum im Dokument, den es einst besetzt hat, erhalten wird. Das Element wird auf eine neue Ebene verschoben und seine „Ebenenreihenfolge“ oder seine Stapelreihenfolge kann dann mit der Z-Index-Eigenschaft gesteuert werden.

<span><span>.thing</span> {
</span>  <span>position: relative;
</span>  <span>top: 100px;
</span>  <span>left: 50px;
</span><span>}</span>

Im obigen Beispiel wird das Element 100px von oben und 50px von links von seiner ursprünglichen Position entfernt.

Bei der Verwendung von Transformation: Übersetzen (x, y), erhalten wir ein sehr ähnliches visuelles Ergebnis wie die relative Position. Das gleiche Ergebnis wie oben könnte mit dem folgenden Ausschnitt erreicht werden:

<span><span>.thing</span> {
</span>  <span>transform: translate(50px, 100px);
</span><span>}</span>

In diesem Fall übersetzen wir die Koordinaten des Elements um 50px entlang der x-Achse und 100px entlang der y-Achse. Das Endergebnis ist visuell dem Beispiel des vorherigen Positionsbeispiels.

Also, warum haben wir zwei Möglichkeiten, dasselbe zu tun? Nun, es gibt einige Unterschiede zwischen diesen Ansätzen…

Browserunterstützung

Position ist eine CSS2 -Eigenschaft, während Transformation eine CSS3 -Eigenschaft ist. Infolgedessen gibt es Unterschiede in der Browser -Unterstützung, obwohl wirklich die einzigen Browser, die 2D -Transformationen nicht unterstützen, IE8 und unten sind.

Wenn Sie alte Versionen von IE unterstützen müssen, ist Transformation keine Option für Sie.

GPU -Beschleunigung

Die Transformationseigenschaft verwendet nach Möglichkeit Hardware -Beschleunigung

Wenn Sie ein Element als Teil einer Übergangs- oder Keyframe -Animation verschieben möchten, bevorzugen Sie eher die Übersetzung als die Position (dies gilt sowohl für die absolute als auch für die relative Positionierung). Weitere Tiefe, einschließlich einer Erklärung und Leistungsprofilierung, lesen Sie dieses Video von Paul Irish.

prozentuale Werte verhalten sich unterschiedlich

Ein großer Unterschied zwischen diesen beiden Methoden zur Platzierung von Elementen ist, wie sie auf prozentuale Werte reagieren.

Nehmen Sie das folgende Markup und Stile:

<span><span><span><div</span> class<span>="box position"</span>></span><span><span></div</span>></span> 
</span><span><span><span><div</span> class<span>="box transform"</span>></span><span><span></div</span>></span></span>

Beide Elemente wurden von ihrer linken Kante von 50%verabreicht.

<span><span>.box</span> {
</span>  <span>width: 200px;
</span>  <span>height: 200px;
</span><span>}
</span><span><span>.position</span> {
</span>  <span>position: relative;
</span>  <span>left: 50%;
</span>  <span>background: red;
</span><span>}
</span><span><span>.transform</span> {
</span>  <span>transform: translateX(50%);
</span>  <span>background: blue;
</span><span>}</span>

Die linke Kante der roten Box ist 50% vom Rand seines übergeordneten Containers entfernt.

Die linke Kante der blauen Box liegt 100px vom linken Rand seines übergeordneten Containers entfernt. Diese Entfernung liegt daran, dass 50% von 200px 100px sind.

Bei der Festlegung von Prozentwerten mit Translate wird der Prozentsatz als Prozentsatz der berechneten Elemente mit Breite oder Höhe gemessen.

Siehe den Stift vyyxgj von sitepoint (@sinepoint) auf CodePen.

Position kombinieren und zusammensetzen

Ein letzter Punkt ist, dass wir sie miteinander kombinieren können. Dies ermöglicht es uns, die absolute Positionierung zu kombinieren, um ein Element an einem sehr bestimmten Ort auf der Seite zu platzieren und diese Position dann mit Transformation zu ändern.

Ein Beispiel dafür könnte sein, dass ein positioniertes Element nach oben oder links und rechts animiert wird. Oder wir können die Positionierung mit Translate kombinieren, um eine flexible vertikale Zentrierung zu erreichen.

Während diese beiden Methoden zur Platzierung von Elementen verwendet werden können, um ähnliche Ergebnisse zu erzielen, gibt es einige signifikante Unterschiede und die Kombination der Stärken jedes Ansatzes macht sie zu einem wirklich leistungsstarken Satz von Werkzeugen.

häufig gestellte Fragen (FAQs) zu CSS übersetzen gegen Position

Was ist der Hauptunterschied zwischen CSS übersetzt und Position? Die CSS -Position ändert die Position des Elements im Dokumentfluss, dh sie kann das Layout anderer Elemente beeinflussen. Andererseits ist CSS Translate eine Transformationsfunktion, die ein Element bewegt, ohne das Layout anderer Elemente zu beeinflussen. Es ändert die visuelle Rendering -Position, nicht die tatsächliche Position im Dokumentfluss. Beeinflussung des Layouts anderer Elemente. Es ist auch für Animationen von Vorteil, da es eine bessere Leistung und glattere Animationen fördert. Dies liegt daran, dass Translate die GPU (Grafikverarbeitungseinheit) verwendet, die bei der Rendern von Grafiken und Animationen effizienter ist. Sie können beide CSS -Übersetzer und Position auf demselben Element verwenden. Es ist jedoch wichtig zu verstehen, wie sie zusammenarbeiten. Die Positionseigenschaft wirkt sich zuerst auf die Position des Elements im Dokumentenfluss aus, und dann verschiebt die Übersetzungsfunktion das Element aus dieser Position. CSS Translate wird häufig für Animationen empfohlen, da die GPU verwendet wird, was die Grafik und Animationen effizienter darstellt. Dies führt zu glatteren Animationen und weniger CPU (Central Processing Unit), die die Gesamtleistung einer Webseite verbessern kann. CSS Translate funktioniert mit allen Arten von Positionswerten - statisch, relativ, absolut, fest und klebrig. Die Übersetzungsfunktion verschiebt das Element unabhängig vom Positionswert aus seiner Position.

Welche Einheiten kann ich mit CSS verwenden. Prozentsätze sind relativ zur Größe des Elements selbst, nicht zur Eltern. Dies gibt Ihnen mehr Flexibilität und Kontrolle über die Bewegung des Elements.

Kann ich die Bewegung eines Elements mit CSS -Position animieren? CSS -Position, es wird nicht empfohlen. Dies liegt daran, dass das Ändern der Positionseigenschaft Layoutverschiebungen auslösen kann, was die Leistung negativ beeinflussen kann. Für Animationen ist CSS Translate die bessere Option. Wenn Sie jedoch eine Übersetzungsfunktion auf ein Element anwenden, erzeugt er einen neuen Stapelkontext, der beeinflussen kann, wie der Z-Index angewendet wird. Sie können CSS -Übersetzer verwenden, um ein Element diagonal zu bewegen. Sie können dies tun, indem Sie sowohl die X- als auch die Y -Werte in der Übersetzungsfunktion angeben. Beispielsweise verschiebt sich das Element über Translate (50px, 50px) nach rechts 50 Pixel und 50 Pixel nach unten und erzeugt effektiv eine diagonale Bewegung. 🎜> Nein, CSS Translate hat keinen Einfluss auf den klickbaren Bereich eines Elements. Der klickbare Bereich bleibt an der ursprünglichen Position im Dokumentfluss, auch wenn die visuelle Darstellung des Elements mit Translate verschoben wurde.

Das obige ist der detaillierte Inhalt vonATOZ CSS: Unterschied zwischen Translate und Position Relative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!