ATOZ CSS：翻譯與位置相對之間的差異

鑰匙要點

• > CSS位置之間的主要區別：相對和轉換：transpate（）它們如何影響其他元素的佈局。位置：相對改變了元素在文檔流中的位置，可能會影響其他元素，而轉換：transpate（）移動元素而不影響其他元素的佈局。
> CSS變換：Translate（）由於使用GPU（圖形處理單元）加速而通常是動畫的首選，這會導致動畫和更好的性能。還值得注意的是，這兩種方法之間的基於百分比的值的行為不同，翻譯成元素計算的寬度或高度的百分比。
• >
> CSS位置：相對和變換：Translate（）可以在同一元素上使用。這種組合允許精確放置元素在頁面上，並進一步修改該位置。這使它們成為元素放置的強大工具集。

本文是我們ATOZ CSS系列的一部分。您可以在此處找到該系列的其他條目。 您可以在此處查看有關Translatex的相應視頻的完整成績單和屏幕錄像。

歡迎參加我們的ATOZ CSS系列！在本系列中，我將探索不同的CSS值（和屬性），每個CSS值（和屬性）以不同的字母開始。我們知道有時屏幕截圖還不夠，因此在本文中，我們添加了有關翻譯和位置之間差異的快速提示。

>

x用於翻譯和位置>

>有許多CSS屬性用於將元素放在頁面上。其中包括大型佈局屬性，例如浮點，邊距和填充物，以及更細粒度的工具，例如位置和translate（）。 在表面上，位置：相對和變換：transpate（）似乎以一種相似的方式起作用，但是有一些微妙的差異很重要，因此我們為工作選擇了合適的工具。

翻譯和位置之間有什麼區別：相對？

在這篇文章中，我們將查看這些方法的這些方法之間的許多差異，但首先，讓我澄清這些各種屬性的作用。

如果我們設置了位置：相對元素，我們可以使用它為

>絕對

>內部定位元素創建邊界。這可能是對相對定位的更常見的用法，但不是我們在這裡討論的用途。

>

如果我們將位置結合在一起：相對與偏移屬性之一的頂部，底部，左或右相對，則元素將從其原始位置移動在佈局中，同時保留曾經佔用的文檔中的空間。該元素將被移至新層，其“圖層順序”或其堆疊順序可以通過Z-Index屬性進行控制。

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

>在上面的示例中，元素將從頂部移動100px，距其原始位置的左側50px。

使用轉換時：轉換（x，y），我們得到的視覺結果與使用相對位置非常相似。通過以下片段可以實現與上述相同的結果：

在這種情況下，我們將沿X軸和100px沿Y軸翻譯該元素的坐標。最終結果在視覺上與以前的位置示例相同。

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

>那麼，為什麼我們有兩種做同樣的事情的方法？好吧，這些方法之間存在一些差異……

>

>瀏覽器支持

位置是CSS2屬性，而轉換是CSS3屬性。結果，瀏覽器支持存在差異，儘管實際上唯一不支持2D變換的瀏覽器是IE8及以下。 如果您需要支持IE的舊版本，則不是您的轉換。

gpu加速度

>轉換屬性將在可能的情況下使用硬件加速度，因此，如果在元素上也使用任何動畫或過渡，則使用Translate（）在位置上使用績效好處。 >

如果您想將元素作為過渡或密鑰幀動畫的一部分移動，請使用翻譯而不是位置（這既適用於絕對和相對定位）。有關此的深度，包括解釋和性能分析，請查看Paul Irish的這段視頻。

基於百分比的值的行為不同

這兩種放置元素方法之間的一個主要區別是它們如何響應基於百分比的值。

進行以下標記和样式：

這兩個元素都從其左邊緣的50％偏移。

紅色框的左邊緣將距其父容器的邊緣50％。

藍色框的左邊緣將距其父容器的左邊緣100px。此距離是因為200px的50％為100px。

用翻譯設置百分比值時，將百分比測量為計算寬度或高度的元素的百分比。

>

>請參閱codepen上的sitepoint（@sitepoint）的筆vyyxgj。

>將位置結合在一起

的最後一點是，由於位置和轉換是兩個不同的屬性，因此我們可以將它們結合在一起。這使我們能夠將絕對定位組合在一起，以將元素放置在頁面上非常特定的位置，然後通過變換修改該位置。

>一個例子可能是使定位的元素上下動畫。或者我們可以將定位與翻譯結合在一起以實現靈活的垂直中心。

因此，儘管可以使用這兩種放置元素的方法來獲得相似的結果，但存在一些顯著差異，並且結合了每種方法的優勢使它們成為了非常強大的工具集。

經常詢問有關CSS翻譯與位置的問題（常見問題解答）

> CSS翻譯與位置之間的主要區別是什麼？

> CSS翻譯和位置之間的主要區別在於它們如何操縱元素的位置。 CSS位置會改變元素在文檔流中的位置，這意味著它可以影響其他元素的佈局。另一方面，CSS轉換是一個轉換函數，它可以移動元素而不會影響其他元素的佈局。它更改了視覺渲染位置，而不是文檔流中的實際位置。

我何時應該使用CSS翻譯而不是位置？影響其他元素的佈局。它對動畫也有益，因為它可以促進更好的性能和更順暢的動畫。這是因為Translate使用GPU（圖形處理單元），它在渲染圖形和動畫方面更有效。

我可以同時使用CSS翻譯和位於同一元素上嗎？您可以在同一元素上同時使用CSS翻譯和位置。但是，重要的是要了解它們如何共同努力。位置屬性將首先影響元素在文檔流中的位置，然後翻譯函數將從該位置移動元素。

>

為什麼CSS翻譯經常被推薦用於動畫？ CSS翻譯通常建議用於動畫，因為它使用了GPU，這在渲染圖形和動畫方面更有效。這會導致動畫更順暢，而CPU（中央處理單元）的使用量更少，這可以改善網頁的整體性能。

>

CSS是否可以通過所有類型的位置值轉換工作？ CSS轉換具有所有類型的位置值 - 靜態，相對，絕對，固定和粘性。不管位置值如何，翻譯功能將從其位置移動。

>我可以將哪些單元用於CSS翻譯？

與CSS翻譯，您可以使用像素值，百分比和視口單元。百分比相對於元素本身的大小，而不是其父元素。這使您可以更靈活地對元素的運動。 CSS位置，不建議使用。這是因為更改位置屬性可以觸發佈局變化，這可能會對性能產生負面影響。對於動畫，CSS翻譯是更好的選項。

> CSS翻譯如何影響元素的z索引？ > 我可以使用CSS翻譯以對角線移動元素嗎？ ，您可以使用CSS翻譯來對角線移動元素。您可以通過在翻譯函數中指定x和y值來做到這一點。例如，Translate（50px，50px）會向右移動50像素，並將50像素向下移動，有效地創建對角線運動。 CSS轉換會影響元素的可單擊區域？ 🎜>不，CSS翻譯不會影響元素的可單擊區域。即使元素的視覺渲染已通過翻譯移動。

以上是ATOZ CSS：翻譯與位置相對之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！