ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 位置決めの使用の概要
要素の位置
属性を定義する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の定義は有効になりません
relativerelativeはデフォルト値と同じです、ただし、オフセットと Z インデックスを設定することで他の通常の位置に対するオフセットを制御できる点が異なります。
すべての要素の位置(位置)のデフォルト値は静的です。何も記述しない場合は、position:relativeを使用してtopp、left、z-index、right、bottomの値を設定します。パフォーマンスはデフォルト値と同じです。絶対および固定
特徴:
1. 未定義の場合、ブロックレベルの要素の幅は 100% ではなくなり、コンテンツに応じて自動的に調整されます
2。絶対要素は他の要素をカバーします。
3. 通常のドキュメント フローから切り離され、
floatabsolute が静的ではない前の親要素を基準にして絶対配置された後の効果と同様に、スペースを占有しなくなります。親要素の位置が指定されていない場合、absolute は
html ドキュメントfixedブラウザウィンドウを基準にして絶対配置された要素を生成します。つまり、Web ページがどのようにスクロールされても、要素は常に画面上の特定の位置に留まります。左側のコントロール バーをユーザーに常に表示したい場合は、position:fixe を使用して位置を決めます。
ie6 と ie7 が固定属性をサポートしていない場合の対処方法
解決策
position:absolute
_top:expression(eval(
document.documentElement.scrollTop))を使用します
以上がCSS 位置決めの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。