詳細およびCSSのいくつかのアプリケーションの配置

CSSのポジショニング

一般的な流れ、浮力流れ、ポジショニングの流れ:3つの基本的なCSSの位置決め機構があります。
前記
ノーマルストリーム:左から右へ上から下へ、
浮力流:添加元素フロート;
ビットストリーム:追加された位置決め特性

文書フロー内の要素から1:

  1. 代わりに、文書要素の流れは、文書内の要素のうち、ストリームを無視した場合
  2. ドキュメントフロー内の要素のうち無視自動高さの計算にドキュメントフロー要素

ポジショニング方法:位置

positionプロパティの値:

  • 静的なデフォルト設定の座標が無効です
  • 位置決め絶対絶対
    1:文書の流れから、位置占有しない
    00のhtmlデフォルトの基準点(ゼロブラウザ):2
    3:あなたが親、および位置の親を持っている場合、それはかなり(デフォルトポジショニングを除く)親要素を参照するでしょうしその指定されたサブ要素を参照して
    目的:ページ上のオーバーラップする必要が絶対位置を使用することができます
  • 相対:の相対位置
    1:位置を表す、ドキュメントストリームを占める
    2:ページの読み込み中に、それらの位置に基づいて
    目的:主に含む絶対位置決めブロックを提供することを
  • 固定:固定位置
    1:文書の流れから、占有していない
    2:ページのスクロールを持つ要素と固定スクロールページ、スクロールバーが衝撃によって影響されるであろう。
    参照ブラウザの3時00分時点の
    使用:ページの移動要素とビューポートとの(例えば、トップに戻ります)
  • スティッキー:スティッキー場所
    1:ページが一定の高さに達すると、ドキュメントフローから
    2:吸着ブラウザトップ効果

位置座標

  • 水平方向の左右
  • 縦のトップ下

差の絶対及び相対位置決め

1は、異なる基準、位置決めブロック(ターゲット親要素)を含む絶対的な基準は、基準要素自体デフォルト位置の反対側に配置され、
2、したがって、文書の流れオフオブジェクトの絶対位置がかかりませんスペース、相対的な位置にかかわらず注文が移動するかどうかの文書の通常の流れを妨害しない、要素はまだ元のスペースを占有します。

以下は、詳細な地図の絶対的及び相対的位置です。
ここに画像を挿入説明

位置決め要素の階層

Zインデックス:オート|数

オブジェクトの取得またはスタッキングオーダー。
自動:デフォルト。
番号:単位なし整数値が負であってもよいです。

  1. Zインデックスを設定し、最終的にオブジェクトを優先提供上層に表示され、書き込みされていない、値が大きいほど、より上位層に対して、
  2. z屈折率は、それが否定的である場合、ルーチンは覆われる遭遇、フローティング要素を流れ、負であることができます
  3. 要素(色)要素(色)が要素(色)フロント、リア、z屈折率セット、大きなフロントの値に重畳表示されます

位置決め要素は、道を中心に

一つの方法:

	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;

第二の方法:

	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;

ポジショニングの注意事項

  1. 限り、値の位置が静的でないように、要素を考慮要素は、位置決め要素であります
  2. オフセットボックスには、他のボックスへの影響はありません。
  3. 位置決め要素は、有効なz屈折率が設けられています
  4. 絶対絶対位置決め、固定位置決め要素は、ブロックボックスを固定しなければなりません
  5. 絶対絶対、固定位置の固定要素を位置決めするフロートはなりません
  6. 余白には合併ではありません

アプリケーション位置決め要素

階層関係(相対位置および絶対位置)の要素がある:
ここに画像を挿入説明
フォトストリーム倍率効果(絶対位置):
ここに画像を挿入説明
セカンダリメニュー(絶対位置):
ここに画像を挿入説明
ここに画像を挿入説明
ページボタンとカルーセル図(絶対位置)の底部上の画像のキャプション:
ここに画像を挿入説明
ログイン画面カバーキャップ層/フルスクリーン(固定配置):
ここに画像を挿入説明
サイドバーのナビゲーション(固定配置):
ここに画像を挿入説明
ブラウザのナビゲーション(測位粘度)の上面に吸着。
ここに画像を挿入説明

公開された11元の記事 ウォンの賞賛0 ビュー108

おすすめ

転載: blog.csdn.net/qq_39347364/article/details/104999151