BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLの相対的・絶対的な使い方と違いについて解説

2022-01-07 19:28:42

HTMLの相対的・絶対的な違い 正直なところ、htmlは世界で最もシンプルな言語であり、タグ言語、つまり、タグより多くの英単語が、そのようなテキストクラスセンターテキスト揃え：センター、太字テキスト重み：太字、としてルールがあります。しかし、まだいくつかのより多くの困難は、属性の位置などのタグや属性を習得するために理解するために、それは次のようにコードを配置する方法です。 

#div1{
		position: relative;
		width: 200px;
		height: 200px;
		background-color: blueviolet;
		margin-left: 100px;
	}

 まず、ポゼッションでよく使われる属性値の上位5つから見ていきましょう。

--sticky: ユーザーのスクロール位置に応じた位置決め。つまり、stickyタグで定義されたタグは、ページを上下に移動しますが、その内容は、サイトの横にあるモバイル用ナビゲーションバーなどのように、画面の外に出ることはありません。

--static。HTML要素のデフォルト値、つまり位置決めされず、通常のフローで表示されます。静的に配置された要素は、top, bottom, left, rightの影響を受けません。つまり、positionが書かれていないのと同じ効果があります。

-fixed：要素の位置は、ブラウザウィンドウに対して相対的に固定されます。ウィンドウがスクロールしていても、画面に埋め込まれた壁紙のラベルのように動きません。多くのウェブサイト、特にショッピングサイトで、ナビゲーションバーがページの脇にじっと横たわっているのをよく見かけますが、これは fixed を使っているのです。

--relativeとabsoluteです。相対配置の要素は、通常の位置に対して相対的に配置されます。htmlの重要な点は、タグの中にタグがあるという入れ子関係で、まず、2つの<div>の効果を見るレベルで、兄弟関係にあることです。

 上記の場合は、相対的な位置に設定div1位置になります、あなたは小さな四角がすぐにある大きな正方形の後になることがわかりますが、小さな四角は、相対的であることを来る大きな正方形に相対的です：要素の相対配置は、要素の重複を許可しない、共通のことわざは、相対を介して私はこの位置を占めているあなただけの私の次の位置を立つという。我々は絶対的なpositionabsoluteに大きな正方形を変更する場合 

#div1{
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: blueviolet;
	margin-left: 100px;
}

その効果は次の通りです。

小さな四角はジャンプアップします。これは、大きな四角ではなく、両方の div がこの位置を占めることができるという意味です。排他的絶対配置は、親タグ（この場合は <body></body> ）に対する絶対的な配置です。

拡張機能です。 

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

小さな四角が大きなタグの中に入れ子になっているとき、あなたのdiv1の位置は、兄弟タグの間だけで、前の効果を変えることなく、同じ相対と絶対の効果を持ちます

このとき、div2 のスタイル margin-left を相対的に設定すると、たとえば、大きなボックスが左から 100px のとき、小さなボックスのスタイル margin-left: 100px; 実際の状況は、小さなボックスが左から 200px のときとなります。 

#div1{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: blueviolet;
				margin-left: 100px;
			}
			#div2{
				margin-left: 100px;
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: red;
			}

まとめると 相対位置の要素は、しばしば絶対位置の要素のコンテナブロックとして使用され、タグの入れ子がある場合、子タグの位置スタイルは親タグからの相対位置に設定されます。Ning以外でfastタグを理解するには、htmlのボックスモデルを理解する必要があります。

HTMLのrelativeとabsoluteの使い分けとその違いについては、この記事が全てです。HTMLのrelativeとabsoluteについては、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します