CSS: sovrapposizione di due elementi mobili

Question

Ho due div all'interno di un contenitore. Uno galleggia a sinistra e uno galleggia a destra. Entrambi sono larghi circa il 60% del contenitore e sono progettati in modo tale che si sovrappongano al centro (il div destro ha la priorità).

Come faccio a far sì che si sovrappongano anziché impilare verticalmente come fanno di solito gli elementi mobili? Se posizioni in modo abusivo l'elemento giusto, il div contenente non si espande per adattarsi al contenuto.

Codice (purtroppo non riesco jsfiddle questo come i loro server sono di sola lettura atm):

<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

Uso negativo margin-right sulla scatola sinistra in modo che la scatola di destra è autorizzato a sovrapporsi:

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

Le 104 pixel è la quantità di sovrapposizione più 4PX per i bordi.

Ecco uno jsfiddle.

Answer 2

Si potrebbe creare i div con posizione assoluta e aggiungere un z-index positiva a quella che si vuole essere in davanti.

<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

È possibile farlo solo con il posizionamento.

<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

Provate questo:

<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

ne dite di tirare il div destro con margine negativo. Qualcosa come questo?

<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

Rendere il contenitore più grande in modo che sia in forma. Quindi usa la posizione relativa e a sinistra: -100px o qualunque cosa su quello a destra.

Answer 7

Puoi aggiungere un ulteriore div in là?

<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

Eccellente Soluzione: http://jsfiddle.net/A9Ap7/237/

Quindi, non uso:

MARGIN-LEFT:100px... 

== o comandi simili.
Il problema è che, se la dimensione degli elementi di sinistra viene cambiata, se la finestra viene ridimensionata o ecc., Allora ti creerà problemi! quindi, non usare questi "trucchi" sporchi personalizzati, ma crea una struttura normale all'interno di html, quindi dovrebbero essere ordinati naturalmente.