CSS: Lassen Sie zwei schwebende Elemente überlappen

Ich habe zwei Divs in einem Container. Einer schwimmt nach links und einer schwimmt nach rechts. Beide sind etwa 60% so breit wie der Container und so gestaltet, dass sie sich in der Mitte überlappen (rechtes Div hat Vorrang).

Wie bringe ich sie dazu, sich zu überlappen, anstatt vertikal zu stapeln, wie es normalerweise schwebende Elemente tun? Wenn ich das richtige Element absolut positioniere, wird das enthaltende Div nicht erweitert, um es an den Inhalt anzupassen.

Code (leider kann ich das nicht jsfiddle, da ihre Server atm nur lesbar sind):

<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;
}

Verwenden Sie ein Negativ margin-right auf das linke Kästchen, damit das rechte Kästchen überlappen darf:

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

Die 104 Pixel sind der Überlappungsbetrag plus 4 Pixel für Ränder.

Hier ist ein jsfiddle.

Das geht nur mit Positionierung.

<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;
}

Sie könnten die Divs mit absoluter Position erstellen und einen positiven Z-Index zu dem hinzufügen, den Sie vorne haben möchten.

<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;
}

Können Sie dort ein zusätzliches Div hinzufügen?

<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>

Behälter größer machen, damit beide passen. Verwenden Sie dann Position relativ und links: -100px oder was auch immer auf der rechten Seite.

Hervorragende Lösung: http://jsfiddle.net/A9Ap7/237/

Verwenden Sie also nicht:

  MARGIN-LEFT:100px...

== oder ähnliche Befehle.

Das Problem ist, dass, wenn die Größe der linken Elemente geändert wird, wenn die Größe des Fensters geändert wird usw., Sie Probleme bekommen! Verwenden Sie also keine solchen benutzerdefinierten schmutzigen “Tricks”, sondern erstellen Sie eine normale Struktur innerhalb von HTML, sodass sie natürlich geordnet sein sollten.

Probier diese:

<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>