CSS：2つの浮動要素が重なり合うようにする

Question

コンテナ内に2つのdivがあります。 1つは左に浮動し、1つは右に浮動する。両方ともコンテナの約60％の幅で、中央に重なるように設計されています（右のdivが優先されます）。

浮動小数点のように縦に積み重ねるのではなく、どうやって重ねるのですか？右の要素を無条件に配置すると、包含するdivは内容に合わせて展開されません。

コード（そのサーバは唯一のATM読まれるよう、残念ながら私はこれをjsfiddleすることはできません）：あなたは絶対位置でのdivを作成し、あなたがなりたいものに正のzインデックスを追加することができ

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: right; 
} 

Answer 1

使用右ボックスがオーバーラップさせるように、左側のボックスに負margin-right：

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
    margin-right:-104px; 
} 

104個の画素が境界のため4PXプラスオーバーラップ量です。

ここにはjsfiddleがあります。

Answer 2

フロント。

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 1; 
} 

Answer 3

ポジショニングでのみ実行できます。

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 2; 
} 

Answer 4

この方法を試してください。

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px; 
    position: absolute; 
} 
</style> 

Answer 5

どのようにネガティブマージンと右のdivを引っ張っについて。このようなもの？

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    position: relative; 
    width: 400px; 
    height: 110px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    height: 100px; 
    border: 1px solid green; 
    float: left; 
} 

#right { 
    position: relative; 
    float: right; 
    width: 250px; 
    height: 100px; 
    top: -100px; 
    border: 1px solid red; 
} 

Answer 6

両方が収まるように容器を大きくします。次に、相対的な位置と左の値を使用します。

Answer 7

余分なdivを追加できますか？

<div id="container"> 
    <div id="left"> 
     <div id="left-inner">left</div> 
    </div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
} 

#left { 
    float: left; 
    width: 0px; 
    overflow:visible; 
} 

#left-inner { 
    float: right; 
    width: 250px; 
} 

#right { 
    width: 250px; 
} 
</style> 

Answer 8

優れたソリューション：http://jsfiddle.net/A9Ap7/237/

ので、使用いけない：

MARGIN-LEFT:100px... 

== または類似のコマンドを。
問題は、左の要素のサイズが変更された場合、ウィンドウのサイズが変更された場合などです。問題が発生します。 なので、このようなカスタムの汚い「トリック」は使用しないでください。しかし、htmlの内部では通常の構造にしてください。