CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）-CSSチュートリアル-php.cn

CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）

青灯夜游

リリース： 2018-09-07 11:13:15

オリジナル

3036 人が閲覧しました

この記事では、CSS でposition 属性を使用して位置決め効果を実現する方法について説明します。 CSS における 4 つの配置方法の紹介 (例) は、必要な友人に参考にしていただけると幸いです。

CSS での位置決めの基本的な考え方はシンプルで、通常の位置、または親要素、別の要素、さらにはブラウザウィンドウ自体を基準にして要素のボックスを表示する場所を定義できます。 css 位置属性を使用して位置決め効果を実現する方法から始めましょう。

1: 静的配置 (静的)

HTML 内の位置に従って要素の配置を決定するプロセス。デフォルトでは、要素は通常のフローに表示されます (上、下、左、右、または Z は無視されます)。インデックスステートメント)。要素ボックスは正常に生成されます。ブロックレベル要素はドキュメントフローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のラインボックスを作成します。この要素は位置を静的に設定する必要があります。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-position元素(静态定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			.static {
				position: static;
				border: 3px solid #007AFF;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h2>position: static;</h2>
			<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
			<div class="static">
				该元素使用了 position: static;
			</div>
		</div>
	</body>

</html>

ログイン後にコピー

以下はレンダリングです:

CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）

2: 相対位置決め (relative)

相対位置決めは、通常のフロー位置決めモデルの一部とみなされます。位置決めされた要素の位置は、位置決めされた要素の位置と相対的です。通常のフローでは、上、左、下、右の移動にはすべて値を指定できます。相対的に配置された要素が移動されるかどうかに関係なく、要素は依然として元のページ領域を占有しており、z-index に設定できます。この要素を、ドキュメントフロー内の要素、またはドキュメントフローの外にあるがこの要素よりも小さい z-index 値を持つ要素と比較して、ユーザーの視線に近づけます。相対配置の最大の役割は、この要素の左上隅を基準とした要素の絶対配置を実現することです。この要素は位置を相対に設定する必要があります。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-position元素(相对定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				margin: 10px auto;
			}
			
			
			
			.box1{
		        background-color: red;
		        width:100px;
		        height:100px;
		    }
		    .box2{
		        background-color: yellow;
		        width:100px;
		        height:100px;
		        position: relative;
		        left: 20px;
		    }
		    .box3{
		        background-color: blue;
		        width:100px;
		        height:100px;
		        position: relative;
		        right: 20px;
		    }

		</style>
	</head>

	<body>
		<div class="box">
                        <h2>position: relative;</h2>
			<div class="box1">正常位置的盒子</div>
			<div class="box2">相对于其正常位置向左移动的盒子</div>
			<div class="box3">相对于其正常位置向右移动的盒子</div>

		</div>
	</body>

</html>

ログイン後にコピー

以下はレンダリングです:

CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）

相対的に配置された要素は、絶対的に配置された要素のコンテナブロックとしてよく使用されます。

その3: 絶対配置(absolute)

絶対配置を割り当てられた要素を通常のフロー内の位置からドラッグし、最も近い要素を基準として左、右、上、下などの属性を使用します配置設定を持つ親要素は次のとおりです絶対配置要素の親に配置属性が設定されていない場合は、body 要素の左上隅を基準に配置されます。絶対的に配置された要素はスタックでき、スタック順序は z-index 属性によって制御できます。z-index 値は、大きい方が上になる単位のない整数であり、負の値を持つことができます。

絶対配置の配置方法: 親要素が、position:relative、position:absolute、position:fixed など、静的以外の位置を設定する場合、その親要素に対して相対的に配置され、その位置が左に渡されます。、top、right、bottom 属性は、その親要素に位置設定が設定されていない場合、その親要素に位置設定が設定されているかどうかに依存することを規定しています。それでも設定されていない場合は、上位レベルの祖先要素に進みます。つまり、配置は、静的配置以外の配置を持つ最初の祖先要素を基準とします。すべての祖先要素が上記の 3 つの配置のいずれかを持たない場合、ドキュメント本体を基準に配置されます。。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>PHP中文网-position元素(绝对定位)</title>
		<style>
			.box{
				width: 300px;
				overflow: hidden;
				padding: 10px;
				border: 1px solid #000;
				
			}
			.div1 {
			    width: 150px;
			    height: 150px;
			    background: yellow;
			}
			.div2 {
			    width: 150px;
			    height: 150px;
			    background: red;
			    top: 150px;
			    left: 100px;
			    position: absolute;
			}

		</style>
	</head>

	<body>
		<div class="box">
			<h2>position: absolute;</h2>
			<div class="div1">
			父元素
			    <div class="div2">子元素</div>
			</div>

		</div>
	</body>

</html>

ログイン後にコピー

以下はレンダリングです:

CSSでposition属性を使用して位置決め効果を実現するにはどうすればよいですか? CSSでの4つの配置方法の紹介（例）