Position

2785 ワード
CSS position テキストリンク
CSSレイアウトで位置属性を表す位置について説明します.

きほんげんそ

  • static
  • relative
  • fixed
  • absolute
    • position: static
    すべてのタグのデフォルト値は静的です.
    inlineプロパティのタグspan 1、span 2、span 3は並べて表示され、blockプロパティのdivタグは次の行に表示されます.
    postion: relative
    相対状態は、既存の静的位置から少し異なる位置に移動したい場合に使用できる値です.
    の「上」(top)、「下」(bottom)、「右」(right)、「左」(left)属性を使用して位置を移動できます.
    相対は移動時に各方向に対して内側に移動するため、負の値(px)を与えると相対的に外側に移動する.
    position: absolute
    absoluteはposition:静的プロパティを持たない親に対して位置を移動します.祖先にstatic以外のタグがない場合、<body>タグに基づいて移動します.

    -HTML-
    
    <div class="ab"> absolute</div>
    <div id="parent">
      <div class="child"> child</div>
    </div>
  </body>
    図に示すサブクラスは右端にあり、親は親タグであり、position:相対値を有するため、親タグに対して相対的である.しかしながら、abクラスには祖先がないため、<body>に基づいてページの右端に並べ替えられる.
    position: fixed
    固定状態は特定の位置に固定できます.
    スクロールすると、指定した場所に固定されます.
    JS|プレゼンテーションブラウザ
    白俊-聴解雑誌(1764)