HTML における相対と絶対の使用法と違いの詳細な説明

HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言語であり、タグには英語の単語が多く含まれていますが、text-align:center; bold text-weight:bold; など、すべて規則的です。ただし、位置を指定する方法である属性 position など、理解しにくいタグや属性がまだいくつかあります。コードは次のとおりです。

#div1{
		位置: 相対的;
		幅: 200ピクセル;
		高さ: 200px;
		背景色: 青紫;
		左マージン: 100px;
	}

まず、ポジションの 5 つの共通属性値について説明します。

--sticky: ユーザーのスクロール位置に基づいた位置。つまり、スティッキータグで定義されたラベルはページとともに上下に移動しますが、その内容は、Web サイトの横にあるモバイルナビゲーションバーなどの画面を超えることはありません。

--static: HTML 要素のデフォルト値。つまり、配置はなく、要素は通常のフローで表示されます。静的に配置された要素は、上、下、左、右の影響を受けません。それは位置を書かないのと同じ効果です。

--fixed: 要素の位置はブラウザウィンドウに対して固定されます。ウィンドウをスクロールしても動かず、壁紙ラベルのように画面に埋め込まれているようなデザインです。ショッピングサイトを中心に多くのサイトで見かけます。ページの横にひっそりと横たわるナビゲーションバーはfixedで実装されています。

--相対および絶対: 相対的に配置された要素の配置は、その通常の位置を基準に行われます。各タグのスタイル設定は常にそのタグ自体に適用されますが、他のタグに相対的な影響を与えます。HTML で非常に重要な点は、タグの中にタグがあるというネスト関係です。まずは、同じレベルでの効果を見てみましょう。2 つの <div> は兄弟です。

上記の場合、div1の位置は相対的に設定されています。小さな四角形が大きな四角形の隣にあることがわかります。つまり、小さな四角形は大きな四角形に対して相対的であり、相対的であるということです。相対配置要素の配置では、要素が重なることは許可されません。ことわざにあるように、相対的とは、私がこの位置を占めていて、次の位置に立つ必要があることを意味します。大きな四角形の位置を絶対的に変更すると、

#div1{
	位置: 絶対;
	幅: 200ピクセル;
	高さ: 200px;
	背景色: 青紫;
	左マージン: 100px;
}

効果は以下のとおりです。

小さな四角形が上にジャンプします。つまり、大きな四角形ではなく、両方の div がこの位置を占めることができるということです。絶対配置は、親タグに対する絶対配置です。この場合、親タグは <body></body> です。

拡張機能:

<div id="div1">
  <div id="div2"></div>
</div>

小さな四角形が大きなタグ内にネストされている場合、div1 の位置の相対的および絶対的な効果は変更されません。以前の効果は兄弟タグ間でのみ反映されます。

このとき、div2 のスタイルを設定すると、margin-left は div2 を基準とします。たとえば、大きいボックスが左から 100px 離れている場合、小さいボックスのスタイルが margin-left: 100px; の場合、実際の状況では、小さいボックスは左から 200px 離れています。

#div1{
				位置: 相対的;
				幅: 200ピクセル;
				高さ: 200px;
				背景色: 青紫;
				左マージン: 100px;
			}
			#div2{
				左マージン: 100px;
				位置: 絶対;
				幅: 50px;
				高さ: 50px;
				背景色: 赤;
			}

概要: 相対配置要素は、絶対配置要素のコンテナブロックとしてよく使用されます。タグがネストされている場合、子タグの位置スタイル設定は親タグに対して相対的になります。クイックタグを理解するには、HTML ボックスモデルを理解する必要があります。

これで、HTML の相対と絶対の使い方と違いについての記事は終わりです。HTML の相対と絶対に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: vue3+TypeScript+vue-routerの使い方

>>: CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプルコード)