Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • 3.3 Posicionamientos Static y Relative

    Încărcat de

    Raul Vaquero Dominguez
    15 vizualizări2 pagini

    Titlu original

    3.3 Posicionamientos static y relative

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    15 vizualizări2 pagini

    3.3 Posicionamientos Static y Relative

    Încărcat de

    Raul Vaquero Dominguez

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 2

    Capítulo III:

    I Posicionamiento

    Posicionamiento static y relative (3 de )

    Una de las mejores cosas de CSS es que nos da la capacidad de colocar dentro de una página web
    contenidos y elementos en casi cualquier ubicación imaginable. Brindando una mejor estructura a nuestro
    diseño ayudando a ordenar mejor nuestro contenido.

    La propiedad position controla el tipo de posicionamiento utilizado por un elemento dentro de sus
    elementos padres. Puede aceptar varios valores y cada uno tiene su propia aplicación.

    static
    La propiedad, position: static; ess el valor predeterminado de los elementos.
    elementos. Es decir, los elementos se
    colocarán según el flujo normal del documento HTML como cualquier otro contenido tipo block. Por decirlo
    de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los
    atributos top, left, right y bottom no se tendrán en cuenta.

    Prueba
    rueba el siguiente código. Observarás que aunque lo asocies a un estilo (con position:static;) los
    valores aplicados a las propiedades top, left, right y bottom no producen ningún efecto.

    HTML: CSS:

    <body> div{
    <div> background:#ffffaa;
    Este elemento no posee ningún posicionamiento especialsi se declara position:static;
    como position: static; ya que es el posicionamiento por defecto. top:50px;
    </div> right:50px;
    </body> bottom:50px;
    left:50px;
    }

    Vuelve a copiar el elemento div del HTML dos o tres veces


    ces más en el propio documento, en el CSS
    añade la propiedad width:200; y comprueba a que el elemento div aparece varias veces pero
    siguiendo el flujo normal de la información mostrada por el navegador.

    relative
    Para entender la propiedad position: relative; partiremos del siguiente código HTML asociado al CSS que
    se muestra a continuación.

    HTML:
    <body>
    <div class="cabecera">
    class="cabecera"
    Petición de Sancho al doctor de la
    l ínsula que gobernaba
    </div>

    <div class="principal">
    class="principal"
    -Mirad,
    Mirad, señor doctor: de aquí adelante no os curéis de darme a comer…
    comer
    </div>

    <div class="pie">
    Suceso acontecido en el CAPÍTULO 49 de la segunda
    se parte
    </div>
    </body>
    .cabecera{
    background:#ff4040;
    }
    .principal{
    background:#80ff80;
    }
    .pie{
    background:#aaaaff;
    }
    Capítulo III: Posicionamiento
    Ahora, al selector .principal le asignaremos la propiedad position:relative; y usaremos las propiedades
    top, right, bottom y left con valor cero. Así, el elemento principal (con fondo verde) seguirá en la misma
    posición. Es decir, seguirá en la posición asignada por el flujo normal de los elementos en el navegador.

    .principal{
    background:#80ff80;
    position:relative;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    }

    Por ejemplo, si a la propiedad lef y top le aplicamos un desplazamiento de 40 píxeles, observaremos que el
    elemento de clase principal, se moverá hacia la derecha 40 píxeles y hacia abajo otros 40 píxeles. Por
    tanto, debemos interpretar que left y top indican el lugar desde donde se empuja al elemento que se
    quiere desplazar, según la posición relativa que ocupa el elemento en la ventana del navegador. Incluso, en
    este caso, ocupará el espacio que se le había asignado al pie (elemento de color morado).

    .principal{
    background:#80ff80;
    position:relative;
    top:40px;
    left:40px;
    }

    Por supuesto, si utilizamos las propiedades right y bottom podemos conseguir que el elemento se desplace
    hacia la izquierda y hacia arriba (tapando el elemento de clase cabecera). De nuevo observa y prueba el
    siguiente código.

    .principal{
    background:#80ff80;
    position:relative;
    right:40px;
    bottom:40px;
    }

    Llegados a este punto sólo nos queda probar una cosa que puede ser extraña y contradictoria, a la vez.
    ¿Qué pasaría si a la propiedad left y right le aplicamos un valor a la vez? La respuesta es que el valor
    asignado a left prevalece sobre el de right.

    .principal{
    background:#80ff80;
    position:relative;
    right:40px;
    left:40px;
    }

    Lo mismo sucederá si aplicamos un valor a top y bottom. El valor asignado a top también prevalece frente
    al asignado a bottom.

    .principal{
    background:#80ff80;
    position:relative;
    bottom:40px;
    top:40px;
    }

    S-ar putea să vă placă și