CSS魔法堂:Position位置決め詳細
2678 ワード
一、Position各属性値の詳細
1. static:デフォルトでは、要素は通常のドキュメントフロー規則に従って配置されます.
2. relative:相対的に位置し、要素は正常なドキュメントフローにありますが、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素の元の位置は保持され、他の要素に占有されません.
[b]. left、topを使用して要素の位置を変更すると、要素は元の位置のborder外枠の左上隅を参照点とします.
[c]. right、topを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の右上隅を参照点とする.
[d]. left、bottomを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の左下角を参照点とする.
[e]. right、bottomを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の右下角を参照点とする.
3. absolute:絶対位置、要素が通常のドキュメントフローから離れ、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素は元の位置を占めなくなります.
ここでは、参照点の代わりにXを使用する変数Xを定義します.
条件:要素のoffsetParentがbodyであり、bodyがCSS位置決めを行っていない場合、X=ページ;
その他の場合、X=offsetParentのpadding外枠です.
[b]. left、topを使用して要素の位置を変更すると、要素はXの左上隅または参照点として使用されます.
[c]. right、topを使用して要素の位置を変更すると、要素はXの右上隅を基準点とします.
[d]. left、bottomを使用して要素の位置を変更すると、要素はXの左下隅を基準点とします.
[e]. right、bottomを使用して要素の位置を変更すると、要素はXの右下角を基準点とします.
4. fixed:固定位置、要素が通常のドキュメントストリームから離れ、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素は元の位置を占めなくなります.
[b]. ブラウザの表示領域の四角を参照点とします.
[c]. IE5.この属性値は5~6ではサポートされていません.
jsを使用して修復できます.スクロールバー要素をドラッグしてフラッシュするバグは、次のCSSで処理する必要があります.
または
二、ドキュメントフローとは
フォームを上から下へ1行に分割し、各行に左から右の順に要素、すなわちドキュメントフローを排出します.要素がドキュメントフローから離れるには、フローティング(float left or right)、絶対位置決め(position:absolute)、固定位置決め(position:fixed)の3つのケースがあります.
三、CSS定位とは何か
CSSの位置付けは、要素のpositionがstaticではないことです.この要素は親子要素のoffsetParentとなり、孫要素のoffsetParentになる機会もあります.
四、まとめ
CSSの位置づけは簡単そうだが、細部を無視しやすいので、本稿ではできるだけ研究所を記録し、みんなで充実させてほしい.
オリジナルを尊重し、転載はhttp://www.cnblogs.com/fsjohnhuang/p/3967350.htmlから明記してください^^;デブのジョン
五、参考
http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html
1. static:デフォルトでは、要素は通常のドキュメントフロー規則に従って配置されます.
2. relative:相対的に位置し、要素は正常なドキュメントフローにありますが、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素の元の位置は保持され、他の要素に占有されません.
[b]. left、topを使用して要素の位置を変更すると、要素は元の位置のborder外枠の左上隅を参照点とします.
[c]. right、topを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の右上隅を参照点とする.
[d]. left、bottomを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の左下角を参照点とする.
[e]. right、bottomを使用するときに要素の位置を変更すると、要素は元の位置のborder外枠の右下角を参照点とする.
3. absolute:絶対位置、要素が通常のドキュメントフローから離れ、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素は元の位置を占めなくなります.
ここでは、参照点の代わりにXを使用する変数Xを定義します.
条件:要素のoffsetParentがbodyであり、bodyがCSS位置決めを行っていない場合、X=ページ;
その他の場合、X=offsetParentのpadding外枠です.
[b]. left、topを使用して要素の位置を変更すると、要素はXの左上隅または参照点として使用されます.
[c]. right、topを使用して要素の位置を変更すると、要素はXの右上隅を基準点とします.
[d]. left、bottomを使用して要素の位置を変更すると、要素はXの左下隅を基準点とします.
[e]. right、bottomを使用して要素の位置を変更すると、要素はXの右下角を基準点とします.
4. fixed:固定位置、要素が通常のドキュメントストリームから離れ、left、top、right、bottomのCSSルールによって要素の位置を変更できます.
注意点:[a].要素は元の位置を占めなくなります.
[b]. ブラウザの表示領域の四角を参照点とします.
[c]. IE5.この属性値は5~6ではサポートされていません.
jsを使用して修復できます.スクロールバー要素をドラッグしてフラッシュするバグは、次のCSSで処理する必要があります.
* html{
background-image:url(about:blank);
background-attachment:fixed;
}または
body{
_background-image:url(about:blank);
_background-attachment:fixed;
}二、ドキュメントフローとは
フォームを上から下へ1行に分割し、各行に左から右の順に要素、すなわちドキュメントフローを排出します.要素がドキュメントフローから離れるには、フローティング(float left or right)、絶対位置決め(position:absolute)、固定位置決め(position:fixed)の3つのケースがあります.
三、CSS定位とは何か
CSSの位置付けは、要素のpositionがstaticではないことです.この要素は親子要素のoffsetParentとなり、孫要素のoffsetParentになる機会もあります.
四、まとめ
CSSの位置づけは簡単そうだが、細部を無視しやすいので、本稿ではできるだけ研究所を記録し、みんなで充実させてほしい.
オリジナルを尊重し、転載はhttp://www.cnblogs.com/fsjohnhuang/p/3967350.htmlから明記してください^^;デブのジョン
五、参考
http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html