StyleSheetの落とし穴 - position属性と幅

レイアの幅の自動調整

* position:fixed/inherit は NN6 のみなので省略

短い場合

BODY直下

position:static; left:100px;( left指定は無意味 )

短い文字列

position:relative; left:100px;

短い文字列

position:absolute; left:100px;

短い文字列

position:absolute;

短い文字列

コンテナブロック内( margin-left:50px; width:400px; )

position:static; left:100px;( left指定は無意味 )

短い文字列

position:relative; left:100px;

短い文字列

position:absolute; left:100px;

短い文字列

position:absolute;

短い文字列

長い場合

BODY直下

position:static; left:100px;( left指定は無意味 )

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:relative; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

コンテナブロック内( margin-left:50px; width:400px; )

position:static; left:100px;( left指定は無意味 )

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:relative; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

コンテナブロック内( position:absolute; left:50px; width:400px; )

position:static; left:100px;( left指定は無意味 )

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:relative; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute; left:100px;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

position:absolute;

長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列

Copyright(c) 2001 ShinSoft. All rights reserved.