コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
静的配置 (static)
相対配置相対(自己愛型)
すべての親要素が配置されていない場合、ブラウザーは現在の画面は整列しています (ドキュメントドキュメント)。
叠放次序（z-index）
四种定位总结
定位模式转换
顺丰案例
ホームページ ウェブフロントエンド CSSチュートリアル cssのpositioning属性の使い方（例付きで詳しく解説）

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Dec 20, 2021 pm 04:26 PM
css

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

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

#Position

background-position 背景の位置

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

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

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

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

  1. 小さな黄色のブロックは画像​​上で移動できます:


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

  2. 画像上の左右の矢印を押します。 :


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

  3. ホット ボックスの外側に追加の部分があり、より目立つようになります:


    cssのpositioning属性の使い方（例付きで詳しく解説） 標準ストリームまたはフロートを使用する場合上記の 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. を通じて位置を移動できますが、元の占有位置は引き続き を占めます。
    2. 第二に、
  2. 各移動の位置、は自分自身の左上隅に基づいています(自分自身を基準にして位置を移動します)
つまり、相対的に配置されたボックスは依然として標準フロー内にあり、その背後にあるボックスは依然として標準フロー方式でそれを処理します。 (

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

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

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

[

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

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

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

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

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

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

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

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

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

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

この文は、

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

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

つまり、

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

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

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

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

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

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

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

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

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

  1. 最初に親ボックスのサイズの半分の 50% を左に残します
  2. 次に、独自の 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 つのポイントがあります。
  1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

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

叠放次序（z-index）

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

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

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

注意：

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

四种定位总结
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="/static/imghw/default1.png"  data-src="images/sf.png"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
		</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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7552
15
CakePHP チュートリアル
1382
52
Steamのアカウント名の形式は何ですか
83
11
Win11 Activation Key Permanent
58
19
NYTの接続はヒントと回答です
22
95
もっと見る
Related knowledge
HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles