html - superponen - CSS: hacer que dos elementos flotantes se superpongan

poner un elemento encima de otro css

Question

Tengo dos divs dentro de un contenedor. Uno flota a la izquierda y uno flota a la derecha. Ambos son aproximadamente 60% tan anchos como el contenedor y están diseñados de tal manera que se superponen en el medio (la división derecha tiene prioridad).

¿Cómo puedo hacer que se superpongan en lugar de apilarse verticalmente, como suelen hacer los elementos flotantes? Si posiciono por completo el elemento correcto, el div que contiene no se expande para ajustarse al contenido.

Código (desafortunadamente no puedo hacer esto, ya que sus servidores son solo de cajero automático):

<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

¿Puedes agregar un div adicional allí?

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

¿Qué hay de tirar de la div derecha con margen negativo. ¿Algo como esto?

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

Excelente solución: http://jsfiddle.net/A9Ap7/237/

Por lo tanto, no utilice:

 MARGIN-LEFT:100px...

== o comandos similares.
El problema es que, si se cambia el tamaño de los elementos de la izquierda, si se cambia el tamaño de la ventana o etc ..., ¡entonces usted tendrá problemas! por lo tanto, no utilice esos "trucos" sucios y personalizados, sino cree una estructura normal dentro de html, por lo que deben ordenarse naturalmente.

Answer 4

Hacer el envase más grande para que ambos se ajusten. Luego use la posición relativa y la izquierda: -100px o lo que sea en el de la derecha.

Answer 5

Podría crear los divs con posición absoluta y agregar un índice z positivo al que desea que esté al frente.

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

Prueba este:

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

Solo puedes hacer eso con posicionamiento.

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

Use un margin-right negativo margin-right en el cuadro de la izquierda para que el cuadro de la derecha pueda solaparse:

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

Los 104 píxeles es la cantidad de superposición más 4px para los bordes.

Aquí hay un jsfiddle .