絶対位置、相対位置、固定位置：それぞれの違いは何ですか？
簡単な答え： はい、もう一つ「static」があり、これはデフォルトです。はい、それぞれは大きく異なります。それぞれが非常に役立つものであり、どれを使用すべきかは、もちろん、求める結果に依存します。また、floatも重要な位置決めの要素ですので、忘れないでください。
中くらいの答え： 「長い答え」を書き直す必要はありませんが、「中くらいの答え」をここで書いてみましょう。各タイプを簡単に説明します。また、この10ステップのチュートリアルを参照することをお勧めします。これは、非常にうまく説明しています。
最初に理解すべき重要な概念は、Webページ上のすべての要素はブロックであるということです。実際にはピクセルの長方形です。これは、要素をdisplay: block;に設定した場合、またはデフォルトでdisplay: block;が設定されている場合に簡単に理解できます。これにより、幅と高さを設定でき、その要素はその設定を尊重します。しかし、spanのようにデフォルトでdisplay: inline;の要素は、実際には長方形ですが、ページ上で異なる方法で流れます。つまり、横並びに配置されます。
すべてのページ要素をピクセルのブロックとしてイメージしたので、次に位置決めを使用して、これらのピクセルブロックを正確に配置する方法について話しましょう。ボックスモデルに関する議論は省略しますが、それもこの概念に影響します…
- Static。これはすべてのページ要素のデフォルトです。異なる要素には異なるデフォルト値が設定されているわけではなく、すべてがstaticから始まります。Staticはあまり意味がありません。それは、要素が通常どおりにページに流れ込むことを意味します。静的に設定された位置決めがある場合に、位置決めを強制的に取り除くために要素にposition: static;を設定する理由があります。これが必要になることはまれで、位置決めはカスケードしません。
- Relative。この位置決めタイプは、おそらく最も混乱し、誤用されがちです。実際に意味するところは「自分自身に対して相対的」です。要素に
position: relative;を設定しても、他の位置決め属性（top、left、bottom、right）を設定しない限り、何の効果もありません。つまり、position: static;のままにした場合と同じです。しかし、他の位置決め属性を設定すると、たとえばtop: 10px;のように設定すると、その位置が通常の位置から10ピクセル下にずれます。このように、通常の位置から要素を動かす能力は非常に便利です。私はしばしば、フォーム要素を整列させるためにこれを使用します。Relativeに設定された要素に2つの他の重要なことが起こります。一つは、その要素にz-indexを使うことができるようになることです。静的に配置された要素にはz-indexが効きません。z-indexを設定しなくても、この要素は他の静的配置された要素の上に表示されます。静的配置された要素にz-indexを設定しても、それを覆すことはできません。もう一つは、相対的に配置された要素の子要素に絶対配置を適用できることです。これは非常に強力な機能を提供します。詳細については、こちらで説明しています。 - Absolute。これは非常に強力な位置決め方法で、ページの要素を完全に希望通りに配置できます。位置決め属性（top、left、bottom、right）を使用して位置を設定します。これらの値は、相対配置または絶対配置された親要素に対して相対的です。親要素がない場合、それは
<html>要素自体に対して相対的に配置され、ページ自体に配置されます。絶対位置決めの最も重要なことは、これらの要素がページ上の他の要素のフローから除外されることです。絶対位置決めがされた要素は、他の要素に影響されず、他の要素にも影響を与えません。これは絶対位置決めを使用するたびに真剣に考慮すべきことです。過度に使用または不適切に使用すると、サイトの柔軟性が制限される可能性があります。 - Fixed。この位置決めタイプはあまり一般的ではありませんが、確かに使用する場面があります。固定位置の要素は、ビューポート、つまりブラウザウィンドウ自体に対して配置されます。ビューポートはウィンドウをスクロールしても変更されないため、固定位置の要素はページをスクロールしてもそのまま位置が維持され、昔の「フレーム」のような効果を作り出します。例えば、このサイト（更新：リンク切れ、申し訳ありません）では、左側のサイドバーが固定されています。このサイトは、固定位置決めの良い点と悪い点を両方とも示す完璧な例です。良い点は、ナビゲーションが常にページに表示されていることと、ページに興味深い効果を生み出すことです。悪い点は、いくつかの使い勝手の問題です。私の小さなノートパソコンでは、サイドバーのコンテンツが切り取られており、残りのコンテンツを見るためにスクロールできません。また、フッターまでスクロールすると、フッターの内容と重なり、すべてを見ることができません。クールな効果ではありますが、非常にテストを行う必要があります。
クレジット: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
今すぐ応募
福利厚生
社員の感情・願望を理解しているので、リバークレーンベトナムは特に年2回の定期昇給制度を設けています。毎年6月と12月に評価を行い、毎年1月と7月に給与が変更されます。また、社員は月次と年次の優秀な個人には定期的な業績賞与が別で支給されます。
チームビルディング・ファミリーデー・お夏休み・中秋節などのイベントはチーム内のメンバーが接続出来るしお互いに自分のことを共有出来る機会です。ご家族員に連携する際にはそれも誇りに言われています。
