imágenes Absolutamente de posicionamiento dentro de div en posición relativa

que he visto varios mensajes relacionados con este tema, pero todavía no pueden conseguir lo siguiente para trabajar:imágenes Absolutamente de posicionamiento dentro de div en posición relativa

.container { 
    position: relative; 
    width: 100%; 
} 

.left { 
    position: absolute; 
    left: 0px; 
} 

.right { 
    position: absolute; 
    right: 0px; 
} 

<html> 
    <body> 
      <div class="container"> 
       <img src="..." class="left"/> 
       <img src="..." class="right"/> 
      </div> 
    </body> 
</html>

Según http://www.w3schools.com/css/css_positioning.asp, específicamente la línea que dice:

Un elemento de posición absoluta se coloca en relación con el primer elemento principal que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque que contiene es <html>

La cuestión es que el div contenedor no tiene altura. Realmente me gustaría no tener que especificar la altura del contenedor div. Sé que flotando la imagen que queda, y la otra imagen a la derecha, y el desbordamiento de configuración: auto en el contenedor div funcionará, pero creo que esperaba no tener que seguir esa ruta ya que me gusta la técnica del posicionamiento absoluto dentro de un div relativo

¿Esto es posible?

Fuente

2011-04-05 Justin Miller

Creo que @Xactor tiene razón. La mejor manera de lograr lo que está describiendo es usar flotadores y un método de limpieza. – Dan

Si tiene un padre que es relativo, ¿por qué no funciona la posición absoluta de la imagen del niño? No entiendo lo que quiere decir con "El problema es que el contenedor div no tiene altura". – Michael

No existe una forma natural para que el contenedor primario cambie el tamaño dinámicamente de sus hijos absolutamente posicionados porque los niños están fuera del flujo.

La mejor manera de hacer lo que usted está describiendo es el uso de flotadores, y un método de compensación:

<style type="text/css" media="screen"> 
body { 
    padding: 20px; 
} 
.container { 
    position: relative; 
    width: 100%; 
    background: yellow; 
} 
.left { 
    float: left; 
    background: red; 
    width: 100px; 
    height: 200px; 
} 
.right { 
    float: right; 
    background: blue; 
    width: 100px; 
    height: 200px; 
} 
/* Use the clearfix technique: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded- 
overflowhidden-demystified/ */ 
.clearfix:before, 
.clearfix:after { 
    content: ".";  
    display: block;  
    height: 0;  
    overflow: hidden; 
} 
.clearfix:after {clear: both;} 
.clearfix {zoom: 1;} /* IE < 8 */ 
</style> 
<body> 
    <div class="container clearfix"> 
    <div class="left"> 
     Left 
    </div> 
    <div class="right"> 
     Right 
    </div> 
    </div> 
</body>

Si insiste en hacer el posicionamiento absoluto y necesita el contenedor principal para que coincida con la altura de los niños, Tendrás que recurrir a javascript.

Fuente

2011-04-05 02:22:21 Xacto01

Muchas gracias. Creo que iré con este método. El hombre eso es una gran cantidad de lectura sobre el método de clearfix. –

imágenes Absolutamente de posicionamiento dentro de div en posición relativa

Respuesta

Cuestiones relacionadas