posición relativa

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // ES" 
        "http://www.w3.org/TR/html4/loose.dtd" > 
< html > 
< head > 
    < title > relative1 </ title > 
    < style type = "text / css" > 
        .f-box { 
            position : relative ; 
            / * borde: 1px rojo sólido; * / 
        } 
        .c1 { 
            color de fondo : púrpura ; 
            altura :; 
            ancho : 100px ; 
        } 
        .c2 { 
            color de fondo : amarillo ; 
            altura : 100px ; 
            ancho : 100px ; 
            posición : absoluta ; / * 1. flujo de documento no separado relativo, utilizando su posición original como la 
                                 posición original después de que se mueve el objeto de referencia Todavía está reservado, por lo que no está fuera del flujo de documentos. 
                                 2. Absoluto está fuera del flujo de documentos. Después de establecer la etiqueta principal en la etiqueta, se colocará en la 
                                 esquina superior izquierda de la etiqueta principal * / 
            izquierda : 100px ; 
        }
        .c3 { 
            color de fondo : azul ; 
            altura : 200 px ; 
            ancho : 200 px ; 
        } 
    </ style > 
</ head > 
< body > 

    < div class = "c1" > 1 </ div > 
    < div class = "f-box" > 
    < div class = "c2" > 2 </ div > 
    <
    div class = "c3" > 3 </ div > 

</ body > 
</ html >