2011-09-20 15 views
6

He tratado con divs que colapsan en su contenido al usar posicionamiento flotante (por ejemplo, resolver con desbordamiento: oculto), pero estoy tratando de aprender el posicionamiento absoluto/relativo y no puedo entender por qué el contenedor div se está colapsando. Mi caso de prueba:¿por qué div se contrae con posicionamiento relativo/absoluto?

<html> 
    <head> 
    <style type="text/css"> 
     body { 
     background-color:#eee; 
     } 

     #content { 
     margin:0 auto; 
     position:relative; 
     border:1px solid red; 
     width:800px; 
     display:block; 
     background-color:white; 
     } 

     #header { 
     border:1px solid black; 
     background-color:#777; 
     color:white; 
     width:800px; 
     position:absolute; 
     left:0; 
     top:0; 
     } 

     #leftcol { 
     position:absolute; 
     border:1px solid black; 
     background-color:#ddd; 
     width:200px; 
     top:100px; 
     left:0; 
     } 

     #rightcol { 
     position:absolute; 
     top:100px; 
     left:205px; 
     border:1px solid black; 
     background-color:#ddd; 
     width:500px; 
     } 

    </style> 
    <title>CSS Positioning Example 1</title> 
    </head> 

    <body> 
    <div id="content"> 

     <div id="header"> 
     <h1>The Awesome Website</h1> 
     </div> 

     <div id="leftcol"> 
     <h2>About</h2> 
     <p> 
     This website is so awesome because it was made by someone 
     and that is really all there is to it. There. 
     </p> 
     </div> 

     <div id="rightcol"> 
     <p>This is where I'm going to put some real body text so that it goes 
     on and on for a while and so I can get a sense of what happens when 
     the text in the paragraph keeps going and the box containing it keeps 
     going on as well. 
     </p> 
     </div> 

    </div> 

    </body> 
</html> 

¿Qué está pasando aquí? ¿Por qué se desploma el contenido div con borde rojo a pesar de que contiene los otros divs?

+0

JSBin: http://jsbin.com/exukoc – Mohsen

Respuesta

8

Es porque todo su contenido tiene el estilo de position:absolute. Esto saca esos elementos del flujo y (en cuanto a diseño) es como si ni siquiera existieran. Considere usar position:relative para posicionar el contenido.

+0

ty para las correcciones ortográficas y gramaticales, @sscirrus. ya es tarde. : P –

+0

Pensé que la idea de usar elementos posicionados absolutos era colocarlos dentro de un antecesor de posición relativa? ¿No es la posición: absoluta en relación con su antecesor? – mix

+0

@Joseph - por supuesto! Buena respuesta, y un +1 de mi parte. – sscirrus

3

que realmente necesita para leer estos artículos en A List Apart

CSS Positioning 101

CSS Floats 101

su pregunta es por qué el div con bordes rojos no se expande a su contenido. Como dijo Joseph, el problema es que quitas los elementos del flujo de documentos. La posición de un elemento hace que la posición del elemento sea independiente de sus padres y hermanos.

He reparado tu código usando CSS float property. Eche un vistazo here.

Le recomiendo que lea esos artículos.

+0

thx para los grandes enlaces. totalmente ayudado. – mix

Cuestiones relacionadas