ホームページ > 記事 > ウェブフロントエンド > cssのpositioning属性の使い方（例付きで詳しく解説）

cssのpositioning属性の使い方（例付きで詳しく解説）

WBOY転載: 2021-12-20 16:26:333043ブラウズ

この記事では、CSS の Position 配置属性に関する関連知識を提供します。Position は、要素の配置タイプを指定する属性として使用されます。属性値が異なれば、配置スタイルも異なります。皆様のお役に立てれば幸いです。。

#Position

background-position 背景の位置

If、フローティングの鍵は「フローティング」という言葉にあり、ポジショニングの鍵は「ポジション」にあります。

PS: 位置決めは CSS の最も難しい側面の 1 つですが、よく学ぶ必要があります。私たちの CSS は位置決め、特に後続の JS 特殊効果と切り離せないものであり、私たちは毎日位置決めに取り組んでいます。抵抗するのではなく、好きになってください。そうすることで仕事が楽になります。

なぜ位置決めを使用するのでしょうか?

それでは、最も長いアプリケーションシナリオはどこでしょうか?いくつかの写真を見てください。間違いなくいくつかの洞察が得られるでしょう。

小さな黄色のブロックは画像上で移動できます:
画像上の左右の矢印を押します。 :
ホットボックスの外側に追加の部分があり、より目立つようになります:

標準ストリームまたはフロートを使用する場合上記の 3 つの小さな場所では、実装がより複雑になるか、実現が困難ですが、現時点では位置決めを使用してそれを実現します。

要素の配置属性

要素の配置属性には、主に配置モードとエッジオフセットが含まれます。 1. エッジオフセット

エッジオフセット属性説明top上部オフセット。親要素の上端を基準とした要素の距離を定義します。bottom下部オフセット量、親要素の最下行を基準とした要素の距離を定義します。left左オフセット、要素の左端を基準とした距離を定義します。親要素right右オフセット。親要素の右の線に対する相対的な要素の距離を定義します

# つまり、将来的には、上: 100px; 左: 30px; など、ここのオフセットと組み合わせて位置決めが使用されることになります。

CSS では、position 属性は要素の配置モードを定義するために使用されます。その基本的な構文形式は次のとおりです:

Selector {position: 属性値;}

位置属性の一般的な値

値説明##static自動配置 (デフォルトの配置方法) 相対配置。元のドキュメントの位置を基準にして配置されます。 flow##absolute 絶対配置、以前に配置された親要素を基準にして配置されますfixedFixed位置、ブラウザウィンドウを基準とした位置

静的配置 (static)

静的配置は、すべての要素のデフォルトの配置方法です。position 属性の値が static の場合、要素は静的な位置に配置できます。いわゆる静的位置は、HTML ドキュメントフロー内の各要素のデフォルトの位置です。

上記の言葉は現地語に翻訳されています: Web ページ内のすべての要素は、デフォルトで静的に配置されます。実はこれがスタンダードストリームの特徴なのです。

静的配置状態では、エッジオフセット属性 (上、下、左、または右) を使用して要素の位置を変更することはできません。

実際には、何もありません。静的位置決めの唯一の用途は、位置決めをキャンセルすることです。 Position: static;

相対配置相対(自己愛型)

相対配置とは、標準フロー内の位置を基準にして要素を配置することです。position 属性の値が相対である場合、要素を相対 (独自の) 位置に配置できます。

要素の相対位置を設定した後、エッジオフセット属性を使用して要素の位置を変更できます。ただし、ドキュメントフロー内の位置は保持されます (元の位置を保持します)## ＃。以下の図に示すように、これは相対配置の効果を示しています。

注:

を通じて位置を移動できますが、元の占有位置は引き続きを占めます。
各移動の位置、は自分自身の左上隅に基づいています(自分自身を基準にして位置を移動します)

つまり、相対的に配置されたボックスは依然として標準フロー内にあり、その背後にあるボックスは依然として標準フロー方式でそれを処理します。 (

相対位置決めはラベル外ではありません)

フローティングの主な目的が複数のブロックレベル要素を 1 行に表示することである場合、位置決めの主な価値は位置を移動することです。ボックスを希望の位置に配置します。

絶対配置絶対 (ピンお父さんタイプ)

[

Note] ドキュメントがスクロール可能な場合、要素は最終的に相対位置になるため、絶対配置された要素も一緒にスクロールします。通常ストリームの特定の部分を見つけます。

position属性の値がabsoluteの場合、要素の配置モードを絶対配置に設定できます。

注: 絶対位置決めで最も重要なことは、エッジオフセットによって位置を移動できることですが、

完全にラベル外です、位置を占有しません## ＃全然。

絶対配置は 3 つの状況に分けられます:

1. 親が配置されていない

すべての親要素が配置されていない場合、ブラウザーは現在の画面は整列しています (ドキュメントドキュメント)。

2. 親には位置決めがあります

絶対位置決めは、位置決めされている最も近い親要素 (祖先) に基づいて要素を配置することです (絶対、固定または相対位置決め) ) 位置決め用。

3. 子は父親と同じである必要があります※※

この文は、

子が絶対的な位置にある場合、親は同じであることを意味します。相対位置である必要があります。

まず初めに、絶対配置とは、絶対配置、固定配置、または相対配置された最も近い親要素 (祖先) に従って要素を配置することです。

つまり、

子供は絶対的な位置にあり、父親だけが位置する必要があります(父親が絶対的な位置にあるのか、相対的な位置にあるのか、さらには固定的な位置にあるのかは関係ありません)、つまり、子供を配置する必要があります。父親と息子の両方が正しいです。ただし、相対位置を使用することを強くお勧めします

しかし、Web ページをレイアウトするときに、最も一般的に言及される息子と父親のイメージはどのようにして得られるのでしょうか。下の図を参照してください:

したがって、次の結論を導き出すことができます:

子は絶対的な位置にあり、その位置を占有しないため、配置することができます。親ボックス内の任意の場所。

親ボックスを配置する際、親ボックスは位置を占める必要があるため、父親は相対的な位置にしか配置できません。

これが子の父親らしさの起源です。

絶対配置ボックスは水平/垂直中央に配置されます

通常のボックスには左右の余白があり、自動に変更できますが、絶対配置には無効です

配置ボックス水平方向または垂直方向のセンタリングのアルゴリズムもあります。

最初に親ボックスのサイズの半分の 50% を左に残します
次に、独自の margin-left の負の値の半分を追加します。

コード例

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*margin: 100px auto;*/
		/*float: left;*/
		position: absolute;
		/*加了定位 浮动的的盒子  margin 0 auto 失效了*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style></head><body>
	<p></p></body></html>

固定位置決め固定 (諦めました)

固定位置決めは、正方形に似た絶対位置決めの特殊な形式です。特別な長方形。ブラウザウィンドウを参照として使用して、Web ページ要素を定義します。 Position 属性の値が固定の場合、要素の配置モードを固定配置に設定できます。

固定位置が要素に設定されている場合、要素は標準のドキュメントフローの制御から外れ、常にブラウザウィンドウに従って表示位置を定義します。ブラウザのスクロールバーがどのようにスクロールしたり、ブラウザウィンドウのサイズが変化したりしても、要素は常にブラウザウィンドウ内の固定位置に表示されます。

固定配置には次の 2 つのポイントがあります。

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结


	relative

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，

行内块的宽度和高度跟内容有关系

** 因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

顺丰案例

cssのpositioning属性の使い方（例付きで詳しく解説）

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.sf {
			width: 1259px;
			height: 472px;
			margin: 100px auto;
			position: relative;
		}
		.nav {
			width: 960px;
			height: 80px;
			background-color: #000;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -480px;
		}
		.nav li {
			list-style-type: none;
			width: 160px;
			height: 80px;
			float: left;
		}
		.nav li a {
			width: 160px;
			height: 80px;
			display: block;
			text-align: center;
			line-height: 80px;
			color: #fff;
			text-decoration: none;
		}
		.nav li a:hover {
			color: #000;
			background-color: #fff;
		}

	</style></head><body>
	<p class="sf">
		<a href="#">
			<img src="images/sf.png" alt=""    style="max-width:90%" width="1259">
		</a>
		<p class="nav">
			<ul>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
			</ul>

		</p>
	</p></body></html>

（学习视频分享：css视频教程）

以上がcssのpositioning属性の使い方（例付きで詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html Static auto 堆 JS 选择器外边距 position margin background 算法

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSで知っておくべきボックスモデルのポイント（整理・共有）とは次の記事：CSSで知っておくべきボックスモデルのポイント（整理・共有）とは

続きを見る