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

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

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

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

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

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

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

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

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

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

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

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

p {
  position: absolute; /* 包含ブロックは、最も近い祖先要素(ブロック要素である場合もそうでない場合もある)のパディング エッジ(pa​​dding-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> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLインデックスの作成について知っておくべきこと

>>:  ウェブデザインレイアウトの理解

推薦する

Tomcatの各ポートの機能の詳細な説明

tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

XAML でボタンを円として再描画する方法

XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンでは...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

reactにおけるstateの略語の詳細な説明

序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...

MySQL での limit の使用方法は何ですか (推奨)

SELECT * FROM テーブル名制限m,n; SELECT * FROM テーブル LIMI...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....

Linux 上のカラフルな猫

Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...

JavaScriptのループの違いについての詳細な説明

目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...