Propiedad position CSS

Uso de la propiedad position

Para entender mejor los ejemplos puedes revisar el documento html en el inspector o abriéndolo directamente en el editor de código y revisar todos los comentarios añadidos en la sección de CSS

Los elementos de bloque permiten definir su anchura por CSS


    div {
        border: 10px solid lightslategrey;
        width: 80%;
        margin-left: 10%;
    }

Vamos a resaltar todos los párrafos del documento con el siguiente formato:


            p {
                border-left: 5px dotted darkgray;
                padding-left: 20px;
                margin-left: 20px;
            }

Parrafo de ejemplo número 1

Parrafo de ejemplo número 2. Este elemento tiene la propiedad position: sticky, que hace que el elemento se comporte como un position: fixed pero sólo cuando el elemento es alcanzado por el scroll del documento. Para que funcione es necesario definir también la propiedad top del mismo elemento, y además, ninguno de sus contenedores puede tener definida la propiedad overflow


    .salta {
        position: sticky;
        top: 0;
        background-color: lightcyan;
    }

Parrafo de ejemplo número 3

Parrafo de ejemplo número 4

Parrafo de ejemplo número 5

Elementos en línea

Los elementos en línea no reconocen el atributo width, porque la anchura la determina su contenido

Si admiten márgenes horizontales (left y right), pero no los verticales (top y bottom) porque son elementos sujetos a la "línea" de texto

Los valores de padding si afectan a los 4 lados del elemento, pero teniendo en cuenta que el superior e inferior pueden provocar efectos de solapamiento entre las líneas de texto.

Texto en negritaTexto enfatizadoEnlace de textoEnvuelve texto sin mostrar formato especial


    strong {
        background-color: lightblue;
        margin-left: 40px;
        margin-right: 20%;
    }
    a {
        background-color: lightcoral;
    }
    em {
        background-color: lightgray;
    }
    span {
        background-color: lightgreen;
    }

Otro texto dentro de un elemento div, y resaltado con una etiqueta strong. Lo podemos comparar con el texto siguiente, que está dentro de un elemento p, pero no dentro de un div

Otro párrafo para ver el efecto de la anchura del elemento div

Sección 1

Veamos comportamiento de flujo alterado por las diferentes propiedades position. Para los elementos section del documento aplicamos este formato básico, en el que no cambiamos propiedades de posición. Por lo que de entrada cada elemento se mostrará donde le corresponde por flujo:


    section {
        border: 4px solid lightblue;
        padding: 20px;
        padding-bottom: 70px;
    }

Sección 2

Los cambios de márgenes afectan al flujo del documento, provocando un cambio de anchura en los elementos horizontales, y una separación entre elementos en los verticales. Para este elemento definimos:


            .segunda {
                margin-left: 150px;
                margin-top: 50px;
                margin-right: 100px;
                margin-bottom: 20px;
            }

Sección 3

Los elemetos definidos mediante posición relativa siguen en el flujo del documento, y condicionan la posición de los demás elementos por el flujo, pero permiten desplazarse a partir de esa posición inicial con los valores habituales (top, left, right, bottom). Además, la propiedad z-index define el orden de apilamiento de los elementos, a mayor número, más arriba queda el elemento.


            .tercera {
                position: relative;
                left: 200px;
                top: 20px;
                background-color: lavender;
                z-index: 2;
            }

Sección 4

Los elementos con posición absoluta salen del flujo del documento por completo, y se ubican respecto a un elemento contenedor mediante valores al estilo de un eje de coordenadas. Aparecen por encima o por debajo de otros elementos del documento, superpuestos, pero no reorganizan el documento.

Caja ubicada de manera absoluta. Está ubicada respecto a la sección 4, pero no forma parte del flujo, además desborda su contenedor tapando lo que pudiera haber a continuación.


    #caja {
        background-color: lightslategrey;
        width: 40%;
        font-weight: bold;
        color: white;
        top: 120px;
        left: 30%;
        position: absolute;
    }

Sección 5

Este elemento se mantiene fijo en pantalla porque usa la posición fija (fixed) y toma como referencia los 4 lados de la ventana.