マスターCSSの位置決め

11581 ワード
beginners tutorial webdev css テキストリンク
能力は、ページ上の要素を配置するすべてのWeb開発者が必要です.それでも、私は経験豊富な開発者もしばしばこのビットまたはGoogleと即座に闘争を参照してください.しかし、あなたがあなたの時間をとって、この権利を得るならば、あなたはCSSポジショニング忍者です⚔️ このポストの終わりまでに.

ビデオチュートリアル
あなたがビデオ形式でそれを見るのを好むならば、私は私の上でチュートリアルをつくりました.

CSSプロパティの位置
The position property 1 i要素がページ上にどのように配置されるかをブラウザに指示する.デフォルトではstatic , しかし、以下の値のいずれかを変更することができます.relative , absolute , fixed , sticky . このポストでは、私は彼らの各々の上に行きます.

基地の例
我々は、より良い理解のための単純なHTMLマークアップを使用します.これは、コンテナのdiv、3子のdiv、我々は例を通して位置することが含まれます.
私もこれらの子供のdivに異なる色を加えたので、それは違いを見るのがより簡単でしょう.
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <title>CSS positions</title>
    <style>
      .container {
        background-color: lightblue;
        padding: 20px;
      }

      .container > div {
        padding: 15px;
      }

      .container span {
        margin-bottom: 20px;
      }

      .first {
        background-color: lightgreen;
      }

      .second {
        background-color: lightcoral;
      }

      .third {
        background-color: lightgoldenrodyellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span>Container</span>
      <div class="first">First</div>
      <div class="second">Second</div>
      <div class="third">Third</div>
    </div>
  </body>
</html>
ℹ️ あなたがコードで遊ぶことを望むならば、これを使ってくださいCodeSandbox link.

静的
これは位置プロパティの既定値です.要素の位置が静的である場合、要素は元のドキュメントフロー内の位置に基づいて順番にレンダリングされます.
以下のようになります.


相対
要素の位置を相対的に設定すると、デフォルトで静的に使用されます.位置関係を設定すると、次のCSSプロパティにアクセスできます.top , left , right , bottom . これらで、特定の方向にオフセットを加えることができます.例えば、設定した場合left: 20px . 要素は右に20ピクセル配置されます.我々が20 pxを提供したならば、それは20 pxで左に内容を押します.
次の変更を行います.
.second {
        background-color: lightcoral;
        position: relative;
        left: 20px;
      }
この結果を得る


固定
固定測位によってもtop , left , right , bottom プロパティ.この場合、要素はブラウザウィンドウのビューポートに対して配置されます.
それで、我々が固定された位置している要素の上にトップ70 pxと20 pxをセットするならば、それはviewportの最上部から70ピクセルとビューポートの左端から20 pxに現れます.固定位置決めはまた、通常のドキュメントフローからドキュメントを削除します.
CSSを変更します
.second {
        background-color: lightcoral;
        position: fixed;
        left: 20px;
        top: 70px;
      }
この結果を得る


絶対
絶対ポジショニングは、開発者を騙すことができるものです.それは固定ポジショニングのように働いています、しかし、それは比較的にViewPortに置かれません、しかし、代わりにそれは最も近い位置する要素(それ以外の位置を持っている)に基づいて置かれますstatic ). 位置しない親がいない場合、ビューポートに対して相対的に位置しますfixed ).
これらの変更をCSSに行います.
.second {
        background-color: lightcoral;
        position: absolute;
        left: 20px;
        top: 70px;
      }
そして、我々は位置と同じ結果を得るfixed :

親に位置値を追加する場合、この場合、コンテナのdivに追加されます.絶対位置の子は、相対的に配置されます.私たちはしばしば親のための相対的な位置を標準のドキュメントフローから削除しないでください、そして、親はそれがいなかったサイトに置かれますposition: relative .
コンテナに相対的な位置を追加します.
.container {
        background-color: lightblue;
        padding: 20px;
        position: relative;
      }
これが結果です.


粘着性の
使用sticky ユーザーのスクロール位置に基づいて、要素を配置します.それは位置の間をトグルするrelative and fixed . 我々は、オフセットを使用して提供することができますtop , left , right , bottom . 指定されたオフセットが満たされるまで、要素は相対的にpsoitizedされた要素のように作用するが、スクロール位置がオフセットより大きいときに、それは固定されたポジションに「withwith」されて、ビューポートに比較的配置される.ユーザーが逆方向に戻ってスクロールし、距離がオフセットよりも小さくなるまで固定され、その後、相対的に位置する要素のように再び動作する.
スクロールするには、ビューポートの高さを3倍にします.
.container {
        background-color: lightblue;
        padding: 20px;
        height: 300vh;
      }
要素に粘着位置とトップオフセットを追加します.
.second {
        background-color: lightcoral;
        position: sticky;
        top: 0;
      }
結果:

さて、デフォルトではページは何もしていないようです.しかし、我々が下にスクロールするならば、第2のdivの下で、それは直接(トップ0オフセットのため、あなたが必要とするならば、より多くを加えてください)のトップに貼り付けられて、その固定位置の内容でスクロールします.我々が先頭に戻るならば、それはその元の位置に置かれます.
そしてこれはあなたがプロのようなWebページ上の要素を配置する必要がありますすべてです.
あなたがもっと学びたいならば、他のプラットホームであまりにも私に続くことを考えてください👇.

あなたが私からより多くを学ぶことができるところ?
私はいくつかのプラットフォームでWeb開発をカバーする教育コンテンツを作成する👀 それらをチェックします.
私も、私が私が作成した週または2週の教育内容を共有するニュースレターをつくります.雄牛なし💩 ちょうど教育内容.
🔗 リンク
  • 🍺 サポートフリー教育buy me a beer
  • 💬 参加するcommunity on Discord
  • 📧 ニュースレターSubscribe here
  • 🎥 YouTube
  • 🐦 Twitter
  • 📷 Instagram
    • HTML 5のグローバル属性について
    JavaScriptの配列