このテーマに触発され
ました 。
これがどのように機能するかの例 。
1.はじめに
相対クラスがあり、その中にテキストがあり、幅を設定しないと想像してください。
#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}
ラバーブロックを取得します。
<div id="bar">
text
</div>
同時に、ブロックには不変のパディング+ボーダーとラバー幅があり、width_px + padding_px + border_px = 100％になります。
絶対ブロックの場合、このトリックはロールしません。
2.レベルによるブロックの分離
相対ブロックの相互関係は、z-indexのようにレイヤーで発生します。 つまり、1つのレイヤーのみで、ブロックは相互作用し、他のブロックには影響しません。
たとえば、黒のブロックは灰色の内側にあり、緑のブロックは黒の内側にあります。
絶対ブロックは、それらが横たわるレイヤーの上隅を基準とした座標を持ちます。 正確な座標（上、左、右、下）が指定されていない場合、それらは相対として機能し、他のブロックに対してシフトします。
3.フロートなしのサイドバーの実装
最初の2つのプロパティに基づいて、高さ= 0で、同じレイヤー上にいくつかの相対（または特定の絶対長さで拡張不可能な）ブロックを作成できます。 つまり、パディングプロパティを使用して、相互に関連するブロックは水平方向にのみシフトします（垂直方向にはシフトしません）。 そして、これらの各ブロック（レイヤー）の内部では、メニューやその他の知恵を実現できます。
唯一の制限は、幅を使用できないことです：ストレッチブロックでは100％。
CSS：
#leftbar{
position:absolute;
height:0px;
width:198px;
margin:0px;
padding:0px;
top:0px;
}
#rightbar{
position:relative;
padding:0px 0px 0px 200px;
margin:0px;
height:0px;
}
#sidebar{
position:relative;
border:1px solid black;
background:#808080;
height:200px;
}
#menu{
position:relative;
border:1px solid black;
background:red;
height:20px;
}
#text{
position:relative;
background:white;
}
HTML：
<div id="rightbar">
<div id="menu">
menu
</div>
<div id="text">
text bar
</div>
</div>
<div id="leftbar">
<div id="sidebar">
left side bar
</div>
</div>
結果：
ps IEとの互換性のために、左のバーの絶対値が使用されていると言わなければなりません。 Opera / FireFoxでは、相対+高さ= 0で取得できます。
仕組みの例