Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Posicionamiento CSS

    Cargado por

    Andrea
    8 vistas29 páginas
    El documento describe los diferentes modelos de posicionamiento en CSS, incluyendo estático, relativo, absoluto, fijo y adhesivo. Explica cómo se pueden modificar la posición y tamaño de los elementos usando las propiedades top, bottom, left y right. También cubre el uso del índice z para controlar la superposición de elementos apilados a lo largo del eje z.

    Descripción original:

    Título original

    PosicionamientoCSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento describe los diferentes modelos de posicionamiento en CSS, incluyendo estático, relativo, absoluto, fijo y adhesivo. Explica cómo se pueden modificar la posición y tamaño de los elementos usando las propiedades top, bottom, left y right. También cubre el uso del índice z para controlar la superposición de elementos apilados a lo largo del eje z.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    8 vistas29 páginas

    Posicionamiento CSS

    Cargado por

    Andrea
    El documento describe los diferentes modelos de posicionamiento en CSS, incluyendo estático, relativo, absoluto, fijo y adhesivo. Explica cómo se pueden modificar la posición y tamaño de los elementos usando las propiedades top, bottom, left y right. También cubre el uso del índice z para controlar la superposición de elementos apilados a lo largo del eje z.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 29

    Lic.

    Camila Mielgo 2022


    Basado en DG Álvaro Ghisolfo

    Posicionamiento CSS
    No todo es tan lineal como parece
    Modelos de posicionamiento

    El estándar de CSS define algunos modelos que permiten


    alterar la posición original de los elementos HTML:

    » estático
    » relativo
    » absoluto
    » fijo
    » adhesivo

    Posicionamiento CSS
    Modelos de posicionamiento

    El estándar de CSS define algunos modelos que permiten


    alterar la posición original de los elementos HTML:

    » estático position: static;


    » relativo position: relative;
    » absoluto position: absolute;
    » fijo position: fixed;
    » adhesivo position: sticky;

    El valor de posicionamiento por defecto para todos los elementos es static.

    Posicionamiento CSS
    Modelos de posicionamiento

    Modificación de la posición
    La posición de los elementos, y a veces también su ancho y alto,
    se pueden configurar indicando cierta distancia definida desde cuatro
    lados que se toman como puntos de partida:

    » superior
    » derecho
    » inferior
    » izquierdo

    Posicionamiento CSS
    Modelos de posicionamiento

    Modificación de la posición
    La posición de los elementos, y a veces también su ancho y alto,
    se pueden configurar indicando cierta distancia definida desde cuatro
    lados que se toman como puntos de partida:

    » superior top: (valor de distancia);


    » derecho right: (valor de distancia);
    » inferior bottom: (valor de distancia);
    » izquierdo left: (valor de distancia);

    ...¿pero respecto de qué elemento?

    Posicionamiento CSS
    Modelos de
    posicionamiento

    Posicionamiento CSS
    Modelos de posicionamiento
    static

    Caja uno.

    Caja dos.

    Caja tres.

    Caja cuatro.

    Posicionamiento CSS
    Modelos de posicionamiento
    static

    Posicionamiento estático
    Caja uno. Es el valor por defecto de todos
    los navegadores. No toma en
    cuenta valores de modificación
    Caja dos. de posición ni de índice z.

    Caja tres.
    position: static;
    Caja cuatro.

    Posicionamiento CSS » 2019


    Modelos de posicionamiento
    relative

    Posicionamiento relativo
    Caja uno. Posiciona el elemento cambiando
    su distancia tomando como
    parámetro la posición original.
    Caja dos. No modifica el espacio que
    hubiese ocupado en la página.

    Caja tres.
    position: relative;
    top: 2em;
    Caja cuatro. left: 2em;

    Posicionamiento CSS DG
    Modelos de posicionamiento
    absolute

    Posicionamiento absoluto
    Caja uno. Ubica el elemento a una distancia
    Caja tres. según el primer contenedor
    inmediatamente definido como
    Caja dos. relativo. Los demás elementos
    ignoran su existencia y su ancho
    y alto serán automáticos.
    Caja cuatro.
    position: absolute;
    top: 2em;
    left: 2em;
    position: relative;

    Posicionamiento CSS DG
    Modelos de posicionamiento
    absolute

    Caja tres. Posicionamiento absoluto


    Caja uno. Si no hay ningún contenedor
    definido como relativo, se toma
    como referencia al <body>.
    Caja dos.

    Caja cuatro.
    position: absolute;
    top: 2em;
    left: 2em;

    Posicionamiento CSS DG
    Modelos de posicionamiento
    fixed

    Caja tres. Posicionamiento fijo


    Caja uno. Ubica el elemento a cierta dis-
    tancia respecto del viewport y
    lo mantiene fijo, sin importar si
    el usuario scrollea la página. Los
    Caja dos.
    demás elementos lo ignoran, su
    ancho y alto serán automáticos.

    Caja cuatro.
    position: fixed;
    top: 2em;
    left: 2em;

    Posicionamiento CSS DG
    Modelos de posicionamiento
    sticky

    Caja tres. Posicionamiento adhesivo


    Caja uno. Combina el posicionamiento
    relativo con el fijo. Lo ubica
    de manera relativa, hasta que
    Caja dos. con el scroll alcanza el umbral
    de desplazamiento. Luego,
    continúa fijo.
    Caja cuatro.
    position: sticky;
    top: 2em;
    left: 2em;

    Posicionamiento CSS DG
    Modificación
    de la posición

    Posicionamiento CSS DG
    Modificación de la posición
    top, left, right y bottom

    Luego se pueden indicar valores


    de distancia respecto de 2 lados. Caja tres.

    position: absolute;
    top: 1em;
    left: 1em;

    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Luego se pueden indicar valores


    de distancia respecto de 2 lados. Caja tres.

    position: absolute;
    top: 1em;
    right: 1em;

    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Luego se pueden indicar valores


    de distancia respecto de 2 lados.

    position: absolute;
    bottom: 1em;
    left: 1em;

    Caja tres.
    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Luego se pueden indicar valores


    de distancia respecto de 2 lados.

    position: absolute;
    bottom: 1em;
    right: 1em;

    Caja tres.
    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Los valores pueden ser enteros


    o con decimales, y pueden Caja tres.
    ser positivo o negativos.

    position: absolute;
    top: 1em;
    left: 1.5em;

    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom
    Caja tres.

    Los valores pueden ser enteros


    o con decimales, y pueden
    ser positivo o negativos.

    position: absolute;
    top: -4em;
    left: 2em;

    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Y también se puede indicar más


    de 2 lados, lo cual terminará Caja tres.
    definiendo su ancho y/o alto.

    position: absolute;
    top: 1em;
    left: 1em;
    right: 0;

    position: relative;

    Posicionamiento CSS
    Modificación de la posición
    top, left, right y bottom

    Y también se puede indicar más


    de 2 lados, lo cual terminará Caja tres.
    definiendo su ancho y/o alto.

    position: absolute;
    top: 1em;
    left: 1em;
    right: 0;
    bottom: -2em;

    position: relative;

    Posicionamiento CSS
    Superposiciones
    de elementos

    Posicionamiento CSS
    Superposiciones de elementos
    z-index

    https://youtu.be/16qxqgACbKE?t=32

    Posicionamiento CSS
    Superposiciones de elementos
    z-index

    Superposiciones de elementos
    CSS también permite modificar qué y
    tan distante se encuentra cada objeto
    con respecto a su ubicación original,
    moviéndose dentro del eje z.

    Posicionamiento CSS
    Superposiciones de elementos
    z-index

    Superposiciones de elementos
    CSS también permite modificar qué y
    tan distante se encuentra cada objeto
    con respecto a su ubicación original,
    moviéndose dentro del eje z.

    z-index: (número entero);

    Posicionamiento CSS
    Superposiciones de elementos
    z-index

    Los valores de índice z pueden Caja uno.


    ser positivos o negativos y no
    tienen unidad de medida. Caja dos.
    Se ordenan del -9999 al 9999,
    donde 0 es la ubicación original.
    Caja cuatro.
    position: absolute;

    Caja tres.

    position: relative;

    Posicionamiento CSS
    Superposiciones de elementos
    z-index

    Los valores de índice z pueden Caja uno.


    ser positivos o negativos y no
    tienen unidad de medida. Caja dos.
    Se ordenan del -9999 al 9999,
    donde 0 es la ubicación original.
    Caja cuatro.
    position: absolute;
    z-index: 2;
    Caja tres.
    z-index: 9999;
    z-index: -1;
    z-index: 1;

    position: relative;

    Posicionamiento CSS
    Links útiles:
    » http://aprende-web.net/css/css7_3.php
    » http://librosweb.es/libro/css/capitulo_5/posicionamiento.html
    » http://librosweb.es/referencia/css/z-index.html
    » https://tomatoma.wordpress.com/css/como-colocar-cada-caja-en-su-sitio-i
    » http://blog.nnatali.com/2009/10/15/css-posicionar-elementos-con-z-index

    Posicionamiento CSS

    También podría gustarte