CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算され、位置がレンダリングされます。

まず、次のことを知っておく必要があります。

1. [パーセンテージ参照][1]:

包含ブロックに基づいてパーセンテージを計算する: (1) 要素の margin/padding/left/right/width は包含ブロックの幅を参照して計算されます。 (2) height/top と bottom のパーセンテージを計算するには、包含ブロックの高さが使用されます。包含ブロックの高さがその内容に基づいて変化し、包含ブロックの位置プロパティに relative または static の値が割り当てられている場合、これらの値は 0 に計算されます。

2. [包含ブロックを決定する][2]:

要素の包含ブロックを決定するプロセスは、要素の位置プロパティに完全に依存します。

（1）位置プロパティが静的または相対的である場合、包含ブロックは、最も近い「祖先ブロック要素」（インラインブロック、ブロック、リスト項目要素など）またはフォーマットコンテキスト（テーブルコンテナ、フレックスコンテナ、グリッドコンテナ、ブロックコンテナ自体など）のコンテンツ領域の端で構成されます。

（２）位置プロパティが絶対値の場合、包含ブロックは、位置値が静的でない（つまり、値が固定、絶対、相対、またはスティッキーである）最も近い祖先要素のパディング領域（パディング左＋コンテンツ＋パディング右）の端から構成されます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <スタイル>
     体 {
  色: オレンジ;
}
div {

  位置: 絶対; 
  /*box-sizing: border-box; /*content=（width-border-padding）追加する場合 box-sizing: border-box;; width=content 追加しない場合 */*/
  幅: 400ピクセル;
  境界線: 5px 実線オレンジ;
  パディング: 50px;
  高さ: 160px;
  背景: ライトグレー;
}

ｐ {
  position: absolute; /* 包含ブロックは、最も近い祖先要素（ブロック要素である場合もそうでない場合もある）のパディング エッジ（padding-left + content + padding-right）で構成されます。
  幅: 50%; /* == (50+400+50)px * 50% = 250px */
  高さ: 25%; /* == (50+160+50)px * 25% = 65px */
  マージン: 5%; /* == (50+400+50)px * 5% = 25px */
  境界線: 5px 実線オレンジ;
  パディング: 5%; /* == (50+400+50)px * 5% = 25px */
  背景: ピンク;
  色: 緑;
}
/*p {
   /* 包含ブロックは、最も近い祖先ブロック要素（ブロック要素のみ可能）または書式設定コンテキストのコンテンツ領域の端（コンテンツ）で構成されます。
  幅: 50%; /* == 400px * 50% = 200px */
  高さ: 25%; /* == 160px * 25% = 40px */
  マージン: 5%; /* == 400px * 5% = 20px */
  境界線: 5px 実線オレンジ;
  パディング: 5%; /* == 400px * 5% = 20px */
  背景: ピンク;
  色: 緑;
}*/
    
    </スタイル>
</head>
<本文>
    <div>
        <p>これは段落です!</p>
    </div>
</本文>
</html>