「ポジション：リラティブ」が物事を混乱させる理由は何ですか？

Question

あなたが右のいずれかのためにposition:relativeを有効にした場合、あなたはそれが左のものをオーバーフローしていることがわかります。

http://jsfiddle.net/bfwhoem5/1/

なぜですか？ それを解決する方法（position:relativeも維持しながら）。また、INSPECTでマウスオーバーすると、正しいものが左にあふれてはいけません。

p.s.私はそれがまだ十分にサポートされていないため、calcを望むいけない...ここで

Answer 1

が一つの解決策である：

#left { 
 
    position:relative; 
 
\t float:left; width:180px; background:#ff0000; 
 
} 
 
#right { 
 
    position:relative; 
 
\t width: calc(100% - 180px); \t background:#00FF00;float:left; 
 
}

<div> 
 
\t <div id="left"> 
 
\t \t leftttt 
 
\t </div> 
 
\t <div id="right"> 
 
\t \t rightttt 
 
\t </div> 
 
</div>

あなたの問題は、1つのdivがフロートや他のではない持っているが、 - 2つのアイテムを横に並べて配置する場合は、100％の幅を持つことはできません。互いの位置に応じて上に移動するか、次の行に移動します。