HTML5 のポジショニングにはどのような種類がありますか?-フロントエンドQ&A-php.cn

HTML5 のポジショニングにはどのような種類がありますか?

青灯夜游

リリース： 2022-01-11 11:18:24

オリジナル

5387 人が閲覧しました

html5 位置決めには 5 種類があります: 1. 絶対位置決め (absolute)、2. 相対位置決め (relative)、3. 固定位置決め (fixed)、4. スティッキー位置決め (sticky)、5. 静的位置決め(静的))。

HTML5 のポジショニングにはどのような種類がありますか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 のいくつかの位置決めメソッド

position は、親ブロックを基準としたブロックレベルの要素の位置、およびそれ自体を基準としたブロックレベルの要素の位置を設定します。絶対配置(absolute)

機能:

親要素がない場合、参照オブジェクトはドキュメント全体です。

デフォルトでは、参照オブジェクトは位置決めされた親要素です。
絶対位置決めされた要素を追加すると、ドキュメント全体が分離されます。レイアウトスペース
絶対的に配置された要素はドキュメントフローからドラッグされ、left などの属性を使用した最も近い位置設定を持つ最も近い親要素に対して相対的に配置されます。、右、上、下など。絶対配置の場合、要素の親が配置属性を設定していない場合は、body要素の左上隅を基準に配置されます。絶対的に配置された要素は積み重ねることができ、積み重ね順序は z-index 属性によって制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値をとることもできます。

絶対配置配置方法: 親要素が、position:relative、position:absolute、position:fixed など、静的以外の位置を設定する場合、その親要素に対して相対的になります。 left、top、right、bottom 属性で指定します。その親要素に位置設定が設定されていない場合は、その親要素の親要素に位置設定が設定されているかどうかによって決まります。それでも設定されていない場合は、上位の項目に進みます。レベルの祖先要素。類推すると、簡単に言うと、その配置は、静的配置以外の配置を持つ最初の祖先要素に対して相対的です。すべての祖先要素が上記の 3 つの配置のいずれかを持たない場合、ドキュメントに対して相対的になります。 . body から位置へ (ブラウザウィンドウに対して相対的ではなく、ウィンドウに対して相対的な位置が固定されます)。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

ログイン後にコピー

class="two" の div をの上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトが変更され、この要素の元の位置に空白スペースは残りません。

HTML5 のポジショニングにはどのような種類がありますか? #2. 相対位置決め (相対とは幽体離脱のシーンに相当します)

特徴:

参照オブジェクトは独自のデフォルト位置です

スペースを占有します
参照オブジェクトは破棄されませんレイアウトフロー

#相対的に配置された要素は積み重ねることができず、左、右、上、下などの属性に基づいて通常のドキュメントフロー内でオフセットできます。 z-index 階層設計を使用することもできます。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

ログイン後にコピー

3. 固定配置 (固定) HTML5 のポジショニングにはどのような種類がありますか?

機能:

参照オブジェクトブラウザウィンドウの固定位置

固定位置は絶対位置と似ていますが、ブラウザウィンドウに対して相対的に配置され、スクロールバーと一緒にスクロールしません。

要素をブラウザウィンドウの上下左右の中央に配置する方法:

方法 1:

position:fixed
left:50%;
top:50%;
margin-left: -盒子宽度的一半
margin-top:-盒子高度的一半

ログイン後にコピー

方法 2:

position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto

ログイン後にコピー

4. Sticky の配置 (sticky には互換性の問題があります)

機能:

これは、相対と固定

## ページがスクロールバーをトリガーしない場合、実行効果は位置: 相対的です。それ以外の場合、実行効果は位置: 固定

<!DOCTYPE html>
<html>
	<meta charset="utf8">
	<head>
		<style>
			section:first-child {
				height: 200px;
				background-color: lightgray;
			}

			section:nth-child(2) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 50px;
			}

			section:nth-child(3) {
				height: 300px;
				background-color: lightgray;
			}

			section:nth-child(4) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 150px;
			}

			section:last-child {
				height: 500px;
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<section>SECTION-1</section>
		<section>SECTION-2</section>
		<section>SECTION-3</section>
		<section>SECTION-4</section>
		<section>SECTION-5</section>
	</body>
</html>

ログイン後にコピー

HTML5 のポジショニングにはどのような種類がありますか? When要素 (div など) に指定しない場合、配置方法はデフォルトで静的になります。これは、要素が文書の流れに従って適切な場所に配置されることを意味します。したがって、異なる解像度の下では、フローポジショニングの使用が適切に適応され、比較的良好なレイアウト効果が得られます。