position(要素の位置定義)

4893 ワード

フロントエンド CSS テキストリンク

①位置属性

position: static;:要素をドキュメントフローごとに配置(デフォルト)

position: relative;:前の要素(通常は親要素)に自然に接続し、位置を指定する

position: absolute;:配置位置指定

position: fixed;:指定位置に固定

position: sticky;:位置によって動作方式が異なります.

1. static

上から下へ、左から右へ順番に置きます
子要素として親要素内に存在する場合、親要素の位置に基づいて配置されます.
トップ、bottom、left、rightは同時に使用できません.使用する場合は無視します.

2.相対（相対位置）

座標プロパティ(top、bottom、left、rightなど)を使用して、静的時のデフォルトの位置に対して位置を移動します.

<head>
  <style>
    body { margin: 0; }
    .parent {
      width: 150px;
      height: 150px;
      background: #bcbcbc;
      border: 1px solid #bcbcbc;
      margin: 50px;
    }
    .relative-box {
      position: relative;
      top: 50px; left: 50px;
      background: #2E303D;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
    }
  </style>
</head>

この場合、親のサブクラスrelation-boxクラス要素のwidth、heightは親要素と同じである.width、heightは継承しないので継承ではありません.相対的な要素を適用するには、座標プロパティを適用する以外に、静的を指定する場合と同じ要素が適用されます.

3.absolute（絶対位置）

position: static;属性のない親または最近の祖先要素による移動
親または最も親しい祖先要素のうち、位置が相対的で絶対的で固定的な要素がなければbodyを基準とする
他の要素が先に位置を占めていても、後ろに押さずに上書きされます.
絶対宣言では、inline要素などの内容に応じてブロックレベル要素の幅が変化するため、適切な幅を指定する必要があります.