CSS-position_absolute

Browse more Css Examples
<!DOCTYPE html>
<html>
    <head>
        <title>Problema</title>
        <meta charset="UTF-8">
        <!--<link rel="StyleSheet" href="estilos.css" type="text/css">-->
        <style>
            #caja1,#caja3 {
                background-color:#f99;
                font-family:verdana;
                font-size:1.3rem;
            }
            #caja2 {
                background-color:#ff0;
                font-size:1.3rem;
                /*El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la página.
                Hay que tener en cuenta que no se reserva espacio en el flujo del documento.
                El posicionamiento es siempre con respecto a la página.*/
                position:absolute;
                left:40px;
                top:30px;
            }
            /*Ahora veamos que pasa si disponemos una serie de elementos con posición absoluta y se superponen. En esta situación debemos inicializar la propiedad z-index con un valor entero, el mismo indica cual tiene prioridad para visualizarse. El valor más grande indica cual tiene prioridad para visualizarse. Es decir que el navegador imprime los elementos con posición absoluta del valor más bajo al más alto.*/
            #caja4{
                position:absolute;
                background-color:red;
                left:10px;
                top:210px;
                width:200px;
                height:200px;
                z-index:1;
            }
            #caja5{
                position:absolute;
                background-color:green;
                left:50px;
                top:250px;
                width:200px;
                height:200px;
                z-index:3;
            }
            #caja6{
                position:absolute;
                background-color:blue;
                left:30px;
                top:230px;
                width:200px;
                height:200px;
                z-index:2;
            }
        </style>
    </head>
    <body>
        <div id="caja1">
            <p>Esta es la primer caja.</p>
            <p>No se desplaza.</p>
        </div>
        <div id="caja2">
            <p>Esta es la segunda caja.</p>
            <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en 
            píxeles).</p>
        </div>
        <div id="caja3">
            <p>Esta es la tercer caja.</p>
            <p>No se desplaza.</p>
        </div>
        <div id="caja4">
            <p>Esta es la Cuarta caja.</p>
        </div>
        <div id="caja5">
            <p>Esta es la Quinta caja.</p>
        </div>
        <div id="caja6">
            <p>Esta es la Sexta caja.</p>
        </div>
    </body>
</html>
CSS-position_absolute

Follow

Newsletter
