ATOZ CSS：翻訳と位置の相対の違い

キーテイクアウト

• CSS位置の主な違い：相対と変換：translate（）は、他の要素のレイアウトにどのように影響するかにあります。位置：相対的なドキュメントフローにおける要素の位置を変更し、他の要素に影響を与える可能性がありますが、変換：translate（）は、他の要素のレイアウトに影響を与えることなく要素を移動します。
css変換：翻訳（）は、GPU（グラフィックプロセシングユニット）アクセラレーションを使用しているため、アニメーションに好まれることがよくあります。これにより、アニメーションがスムーズになり、パフォーマンスが向上します。また、パーセンテージベースの値は2つの方法間で異なる動作をしていることに注意してください。
• 両方のCSS位置：相対および変換：translate（）は、同じ要素で使用できます。この組み合わせにより、ページ上の要素を正確に配置し、その位置をさらに変更できます。これにより、それらは要素配置のための強力なツールセットになります。
• この記事は、ATOZ CSSシリーズの一部です。ここでシリーズの他のエントリを見つけることができます。 ここで、Translatexに関する対応するビデオの完全なトランスクリプトとスクリーンキャストを表示できます。
ATOZ CSSシリーズへようこそ！このシリーズでは、アルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探索します。スクリーンキャストだけでは不十分な場合があることがわかっているため、この記事では、翻訳と位置の違いに関する簡単なヒントを追加しました。

xは翻訳と位置

用です

ページに要素を配置するための多くのCSSプロパティがあります。これらには、フロート、マージン、パディングなどの大きさのレイアウトプロパティ、および位置や翻訳（）などのよりきめ細かいツールが含まれます。 表面上、位置：相対的および変換：翻訳（）は非常に似たように機能しているようですが、把握することが重要な微妙な違いがあるので、仕事に適したツールを選択します。

翻訳と位置の違いは何ですか：相対？ この投稿では、要素の配置のためのこれらの方法の多くの違いを調べますが、最初に、これらのさまざまなプロパティが何をするかを明確にさせてください。

位置を設定する場合：相対要素上で使用して、

絶対

配置要素の境界を作成することができます。これはおそらく相対的なポジショニングのより一般的な使用ですが、ここで議論している使用は

ではありません。

位置を組み合わせた場合：相対的なオフセットプロパティの上部、下、左、または右の1つを使用すると、要素はレイアウトの元の場所から移動し、かつて占有していたドキュメント内のスペースを保存します。要素は新しいレイヤーに移動され、その「レイヤー順」またはそのスタッキング順序はz-indexプロパティで制御できます。

上記の例では、要素は上から100px離れ、元の位置の左側から50pxから移動します。

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

変換を使用する場合：翻訳（x、y）相対位置を使用することと非常によく似た視覚的結果が得られます。上記と同じ結果は、次のスニペットで達成できます。

この場合、要素の座標をX軸に沿って50px、Y軸に沿って100pxで翻訳しています。最終結果は、前の位置の例と視覚的に同じです。

では、なぜ同じことをする2つの方法があるのですか？まあ、

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

これらのアプローチの間にいくつかの違いがあります…

ブラウザサポート

位置はCSS2プロパティですが、変換はCSS3プロパティです。結果としてブラウザサポートには違いがありますが、実際には2D変換をサポートしていないブラウザはIE8以下です。 IEの古いバージョンをサポートする必要がある場合、変換はあなたにとって選択肢ではありません。

gpu加速

変換プロパティは、可能な場合はハードウェアアクセラレーションを使用します。そのため、翻訳（）を使用すると位置を使用すると、要素でアニメーションまたはトランジションも使用されている場合、パフォーマンスの利点が表示されます。

遷移またはキーフレームアニメーションの一部として要素を移動する場合は、位置ではなく翻訳を使用することを支持します（これは絶対的なポジショニングと相対的なポジショニングの両方に役立ちます）。説明やパフォーマンスプロファイリングなど、この詳細については、ポールアイルランドのこのビデオをご覧ください。

パーセンテージベースの値は異なる動作

要素を配置するこれら2つの方法の1つの大きな違いは、それらがパーセンテージベースの値にどのように応答するかです。

次のマークアップとスタイルを取ります：

両方の要素には、左端から50％のオフセットが与えられています。

赤いボックスの左端は、親コンテナの端から50％離れています。

青いボックスの左端は、親コンテナの左端から100px離れています。この距離は、200pxの50％が100px。

であるためです

翻訳でパーセンテージ値を設定する場合、パーセンテージは、計算された幅または高さの要素の割合として測定されます。

CodepenのSitePoint（@SitePoint）のペンVyyxgjを参照してください

位置を組み合わせて翻訳します

最後のポイントの1つは、位置と変換が2つの異なるプロパティであるため、それらを結合できるためです。これにより、絶対的な位置を組み合わせて、要素をページ上の非常に特定の場所に配置し、その位置を変換で変更できます。

この例は、位置付けられた要素を上下または左右にアニメーション化することです。または、ポジショニングと翻訳を組み合わせて、柔軟な垂直センタリングを実現することもできます。

したがって、要素を配置するこれらの2つの方法を使用して同様の結果を達成することができますが、いくつかの大きな違いがあり、各アプローチの強みを組み合わせることで、それらは非常に強力なツールセットになります。

CSSがポジションと位置を翻訳することに関するよくある質問（FAQ）

CSSの翻訳と位置の主な違いは何ですか？

CSS翻訳と位置の主な違いは、それらが要素の位置を操作する方法にあります。 CSSの位置は、ドキュメントフローにおける要素の位置を変更します。つまり、他の要素のレイアウトに影響を与える可能性があります。一方、CSS翻訳は、他の要素のレイアウトに影響を与えることなく要素を移動する変換関数です。ドキュメントフローの実際の位置ではなく、視覚レンダリングの位置を変更します。

いつの位置の代わりにCSS翻訳を使用する必要がありますか？他の要素のレイアウトに影響します。また、パフォーマンスとよりスムーズなアニメーションを促進するため、アニメーションにも有益です。これは、翻訳がGPU（グラフィックプロセッシングユニット）を使用しているためです。これは、グラフィックスとアニメーションのレンダリングにより効率的です。同じ要素でCSS翻訳と位置の両方を使用できます。ただし、それらがどのように連携するかを理解することが重要です。位置プロパティは最初にドキュメントフローの要素の位置に影響し、次に翻訳関数はその位置から要素を移動します。 CSS翻訳は、グラフィックとアニメーションのレンダリングにより効率的なGPUを使用するため、アニメーションに推奨されることがよくあります。これにより、よりスムーズなアニメーションとより少ないCPU（中央処理装置）の使用が生じます。これにより、Webページの全体的なパフォーマンスが向上します。 CSSは、静的、相対、絶対、固定、および粘着性のあるすべてのタイプの位置値で動作を翻訳します。翻訳関数は、位置値に関係なく、その位置から要素を移動します。

CSS翻訳で使用できるユニットは？

CSS翻訳を使用して、ピクセル値、パーセンテージ、およびビューポートユニットを使用できます。パーセンテージは、その親ではなく、要素自体のサイズに関連しています。これにより、要素の動きに対する柔軟性と制御が得られます。

CSS翻訳は、要素のzインデックスにどのように影響しますか？ただし、翻訳関数を要素に適用すると、新しいスタッキングコンテキストが作成されます。これは、z-indexの適用方法に影響を与える可能性があります。 、CSS翻訳を使用して、要素を斜めに移動できます。翻訳関数のx値とy値の両方を指定することで、これを行うことができます。たとえば、翻訳（50px、50px）は要素を右に50ピクセル、50ピクセルを下に移動し、効果的に対角数の動きを作成します。 🎜>いいえ、CSS翻訳は、要素のクリック可能な領域に影響しません。クリック可能な領域は、要素の視覚的なレンダリングが翻訳で移動されたとしても、ドキュメントフローの元の位置に残ります。

以上がATOZ CSS：翻訳と位置の相対の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。