CSSで相対位置と絶対位置を設定する方法-CSSチュートリアル-php.cn

CSSで相対位置と絶対位置を設定する方法

青灯夜游

リリース： 2021-12-09 15:09:07

オリジナル

12621 人が閲覧しました

CSS では、position 属性を使用して相対位置と絶対位置を設定できます。相対位置を設定する要素に「position:relative;」スタイルを追加し、要素に「position:absolute;」スタイルを追加します。要素にスタイルを設定し、絶対位置を設定します。

CSSで相対位置と絶対位置を設定する方法

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

CSS では、position 属性を使用して相対位置 (relative) と絶対位置 (absolute) を設定できます。

相対配置位置:相対

position:relative;   → 必须先声明，自己要相对定位了，
left:100px;       → 然后进行调整。
top:150px;       → 然后进行调整。

ログイン後にコピー

1. 相対ポジショニングの特徴 - 的外れではなく、故郷に穴を残し、影から切り離される

相対ポジショニング的外れではありません、本当の場所は私の故郷ですが、一度影が出るとどこにでも浮かんでしまうことがあります。位置決め

#相対位置決めには落とし穴があるため、通常は「キャッピング」効果を作成するためには使用されません。ページ上では効果は最小限です。機能は 2 つだけです:

微調整要素

# 絶対位置決めの参考として、

top とbottom を使用して、ボックスの底部と上部の動きを記述することができます。

position: relative;
right: 100px;   → 往左边移动
top: 100px;

position: relative;	
right: 100px;
bottom: 100px;    → 移动方向是向上。

ログイン後にコピー

絶対位置

絶対配置は標準外です

絶対配置ボックスも標準ドキュメントフロー外です。したがって、絶対配置後は、標準ドキュメントフローのすべてのプロパティは観察されなくなります。

After絶対配置では、ラベルはいわゆるインライン要素とブロックレベル要素を区別しません。

display:block;

span{
	position: absolute;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	background-color: pink;
}

ログイン後にコピー

絶対位置決めの基準点、上で表すと左下が位置決め基準点となります。ブラウザの左上隅ではなく、ページの隅:

工学的には「息子も父親に似ていなければならない」というのは意味があり、父親は的を外さないし、父親が外れても息子は父親の範囲内で動く。

<div class=”box1”>  → 绝对定位
	<div class=”box2”>  → 相对定位
		<div class=”box3”>  → 没有定位
			<p></p>  → 绝对定位，以box2为参考定位。
		</div>
	</div>
</div>

ログイン後にコピー

絶対位置指定の息子は、参照ボックスのパディングを無視します。下の図では、緑色の部分が div のパディングで、青色の部分がコンテンツですディビジョンのエリアそしてこのとき、div は相対的に配置され、p は絶対的に配置されます。

width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px;   → 宽度的一半

ログイン後にコピー

以上がCSSで相対位置と絶対位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。