01.デフォルト「表示と位置のプロパティを知る必要があります」


「所望の位置に所望の寸法で配置するには、CSSの表示と位置を知る必要があります.」

display

  • display:inline
    内容そのものだけを飾る.(コンテンツサイズがインラインに変更されたため、完全にインラインに設定されている場合、cssファイルの幅と高さの設定にかかわらず、コンテンツサイズ自体が標準です.)
  • display: inline-block
    スペースがあれば1行に複数の物を置くことができます.
    inlineと異なり、コンテンツがなくてもwidthやheightが設定されている場合は、この適用スタイルに基づいています.
  • display:block
    (物の横にスペースがあっても)ずらりと並ぶ.
  • position

  • position: static
    その他の設定がない場合は、デフォルトです
  • position: relative
    元の位置を基準に位置決めします.
  • position: absolute
    含まれるBoxを基準として識別位置決めを行う.
  • position: fixed
    含まれるBox以外のページにナビゲートします.
  •   position: sticky
    スクロールされても元の位置に保たれます.
    リファレンス
    https://developer.mozilla.org/en-US/docs/Web/CSS/display
    https://developer.mozilla.org/en-US/docs/Web/CSS/position