ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 位置決めの使用の概要

CSS 位置決めの使用の概要

高洛峰
高洛峰オリジナル
2017-03-16 10:31:052001ブラウズ

要素の位置

属性を定義するpositionオプションには、static、relative、absolute、fixed、inherit

属性値がrelative、absolute、fixedの場合top | | | z-index が機能します。

static (デフォルト値)

relative (相対位置決め)

absolute (

絶対位置決め)

fixed (絶対位置決め、絶対およびウィンドウブラウザ、下位バージョンのブラウザは次のようなものをサポートしていません) ie6 と ie7)

relative と static はドキュメントの他の要素に対して相対的に配置され、どちらも相対配置のカテゴリに属します。違いは、一方は移動を制御でき、もう一方は

静的 (デフォルト値)

デフォルト値を使用する

場合、CSSの要素のtop、left、right、bottom、z-indexの定義は有効になりません

relative

relativeはデフォルト値と同じです、ただし、オフセットと Z インデックスを設定することで他の通常の位置に対するオフセットを制御できる点が異なります。

すべての要素の位置(位置)のデフォルト値は静的です。何も記述しない場合は、position:relativeを使用してtopp、left、z-index、right、bottomの値を設定します。パフォーマンスはデフォルト値と同じです。

絶対および固定

特徴:

1. 未定義の場合、ブロックレベルの要素の幅は 100% ではなくなり、コンテンツに応じて自動的に調整されます

2。絶対要素は他の要素をカバーします。

3. 通常のドキュメント フローから切り離され、

float

absolute が静的ではない前の親要素を基準にして絶対配置された後の効果と同様に、スペースを占有しなくなります。親要素の位置が指定されていない場合、absolute は

html ドキュメント

全体に対して絶対相対的に配置されます。

fixed

ブラウザウィンドウを基準にして絶対配置された要素を生成します。つまり、Web ページがどのようにスクロールされても、要素は常に画面上の特定の位置に留まります。左側のコントロール バーをユーザーに常に表示したい場合は、position:fixe を使用して位置を決めます。

ie6 と ie7 が固定属性をサポートしていない場合の対処方法

解決策

position:absolute

_top:expression(eval(

document

.documentElement.scrollTop))を使用します

以上がCSS 位置決めの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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