CSSの絶対属性の具体的な解析

の特徴:

absoulte と float は同じ特徴を持っています: ラッピングと破壊的な
absoulte と float 同じ意味で使用できます
相対の影響を受けません制限された絶対的な位置決め、動作パフォーマンスは、フローティングするためにドキュメントフローからの左/右/上/ボタン/自動

およびその他の属性を使用する必要はありません

動作パフォーマンス

(
float 要素と absoulte 要素は同時に出現できません) 位置に続く (元の位置のまま) 問題: IE7 は

absoulte を使用します 要素は常に inline-block要素 解決策: 属性を設定せずにタグのレイヤーの上に外側のレイヤーを配置

正確な位置決めのためにマージンを付けて使用できます

負の値の位置決めをサポート

IE6 との強力な互換性 強力な適応性、優れた保守性、堅牢性

アニメーションは可能な限り機能する必要があります 絶対的に配置された要素では、複数の

絶対 要素が重なり、後者が最上位になります

z-index 依存関係はありません

が 1 つしかない場合absoulte 要素、 を設定する必要はありません。 それぞれの
absoulte 要素は DOM フローの順序を制御します。 を制御するために
複数の位置決めインターリーブ、 z-index: 1 を設定する必要はありません。非ポップアップ
絶対要素、z-index < = 2 冗長な場合は最適化する必要があります

左/右/上/下と幅/高さは相互に置き換えることができます

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

絶対的な全体的なレイアウト

<header></header><article>
   <aside></aside>
   <main></main></article><footer></footer>

1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

以上がCSSの絶対属性の具体的な解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。