CSSの絶対要素をサイジングする2つの方法-jsチュートリアル-php.cn

CSSの絶対要素をサイジングする2つの方法

Jennifer Aniston

リリース： 2025-03-10 00:45:08

オリジナル

291 人が閲覧しました

CSSの絶対要素をサイジングする2つの方法

CSSをしばらく使用している人は誰でも、絶対的および相対的なポジショニングのメリットについて知っているでしょう。要約する：位置：相対により、要素を元の位置から水平方向に（左または右を使用して）または垂直（上または下部を使用）からシフトできます。位置：絶対に、左、右、上、または下部を使用して、コンテンディングブロックに要素を配置できます（含まれるブロックは、相対、絶対、または固定の位置を持つ最も近い祖先ノードです）。したがって、ポジショニングノードは簡単です。 HTML：

<div >
	<div ></div>
</div>

ログイン後にコピー

CSS：

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

ログイン後にコピー

（内側のブロックの実際の幅と高さは、境界線の追加により100pxになります）。次のボックスは、すべての最新のブラウザ（IE6を含む）でレンダリングされています。あまり知られていないことは、左、右、上、下部をすべて適用できることです同時にプロパティ。次のCSSは、内部要素を同じようにレンダリングします。内側のボックスの幅と高さは100pxのままですが、寸法を明示的に設定する必要はありません。これは、次の場合に役立ちます。

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

ログイン後にコピー

境界とパディングが異なる複数の内側の要素がありますが、一貫した外側の間隔が必要です。この方法では、これらすべての要素に対して単一のスタイルを作成できます。
ブラウザの互換性に関するメモ：この手法は、明示的な幅と高さのみを理解する

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

ログイン後にコピー

CSSの絶対位置と相対位置の違いは何ですか？CSSでは、絶対と相対は2つのタイプの位置決め方法です。絶対的な位置決めにより、要素を最も近い位置にある祖先に対して配置することができます。これは、要素がドキュメントの通常の流れから取り出され、ページレイアウトの要素用のスペースが作成されないことを意味します。一方、相対的な位置決めにより、要素を通常の位置に比べて配置することができます。これは、ポジショニングがドキュメントフローにおける要素の元の位置に関連していることを意味し、ページレイアウトにはまだスペースが保存されています。

「位置：絶対」プロパティは、CSSでどのように機能しますか？

CSSの「位置：絶対」プロパティは、通常のドキュメントフローから要素を削除し、最も近い位置にある祖先または初期含有ブロックに比べて指定された位置に配置します。位置付けられた要素は、「トップ」、「右」、「ボトム」、および「左」のプロパティを使用して移動できます。ただし、祖先の要素に「静的」以外の位置がない場合、代わりに初期含有ブロックが使用されます。これらのプロパティは、配置された要素にのみ影響を及ぼします。それらは、要素とその含有要素の1つ以上の辺の間の距離を指定します。たとえば、「Top：20px」とは、要素の上端が含まれる要素の上端から20px離れていることを意味します。