HTMLで位置決めを実装する方法

零到壹度
零到壹度オリジナル
2018-03-29 11:54:483332ブラウズ

この記事は主に HTML での位置決めの実装方法に関する記事を共有するものであり、参考になると思います。編集者をフォローして見てみましょう。

1. CSS の位​​置決め (Posotioning) 属性を使用すると、要素を配置できます。

static (デフォルト値): 要素ボックスは通常どおり生成されます。ブロック要素はドキュメント フロー/標準フローの一部として長方形のフレームを生成します。インライン要素は 1 つ以上のライン ボックスを作成し、それらを親要素に配置します。

相対: 要素ボックスは特定の位置から外れ、要素は残ります。配置前の形状、元々占有していたスペースはまだ保持されている この観点から、変更された要素はまだドキュメント フロー/標準フロー内にあるように見えます

絶対: 要素はドキュメント フローから完全に削除され、相対的になります。その収容位置に。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が元々占有していたスペースは、その要素が存在しないかのように閉じられ、通常のフローで元々どのようなタイプのボックスであったかに関係なく、要素はブロック レベルのボックスに配置されます。

修正: 要素のパフォーマンスは、含まれているブロックがウィンドウ自体 (ボディ) であることを除いて絶対と同様です

2. 相対の概要

この属性値を使用する要素は、座標を基準にして上と左を使用して配置されます元の位置の左上隅の

コード:

 <style type="text/css">
       #main{
	      width:800px;
		  height:400px;
		  margin:0 auto;
		  border:1px solid blue;
	   }
	   .p{
	     width:110px;
		 height:100px;
		 background:yellow;
		 margin-left:10px;
		 float:left;
	   }
   
   </style>
 </head>
 <body>
    <p id="main">
	    <p class="p">p1</p>
		<p class="p">p2</p>
		<p class="p">p3</p>
		<p class="p">p4</p>
	</p>
 </body>

レンダリング:


(1) p2 の位置決め値を相対値に変更します。


位置は、それぞれ右と下に 50 ピクセルと 120 ピクセル移動しました。元の位置は空のままです。左と上の値は負の値にすることもできます。違いは、それらが逆方向に移動していることです

p2 の位置を絶対値に変更します。つまり、position:absolute;top:120px;left:50px;を追加します


p2 が移動していることがわかります。これは、p2 が標準フローにないその下のレイヤーを検索するためです。位置が見つからない場合は、本体を基準として、このレイヤーの左上隅に相対的に移動します。その下に、緑色のフレームを基準にして位置を追加します。


は緑色の枠の左上隅を基準に相対的に移動します

fixed: p2に位置固定属性値を追加します


p2に関係なく、親要素に追加された位置が相対的であるかどうかまたは絶対的な場合、p2 総戸数は本文の左上隅に対して相対的に移動し、前の位置はすでに占有されています。

フローティングに比べてポジショニングが比較的簡単なので、皆さんに何か得て頂ければ幸いです

以上がHTMLで位置決めを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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