32-Propiedad de Posición en CSS: Organiza Elementos 📍

---

Propiedades de Diseño en CSS

• Ancho y Max-ancho en CSS
• Uso de width, max-width y margin: auto;
• La propiedad position
• position: static;
• position: relative;
• position: fixed;
• position: absolute;
• position: sticky;
• Posicionar texto en una imagen
• Todas las propiedades de posicionamiento en CSS

---

Ancho y Max-ancho en CSS

Explicación sobre cómo usar width y max-width para ajustar el tamaño de los elementos en CSS.

<div style="width: 50%; max-width: 600px; background-color: lightblue;">
    Este div tiene un ancho del 50% y un máximo de 600px.
</div>
        

Ejemplo Visual

Este div tiene un ancho del 50% y un máximo de 600px.

---

Uso de width, max-width y margin: auto;

Cómo combinar width, max-width y margin: auto; para centrar y ajustar elementos.

<div style="width: 70%; max-width: 500px; margin: auto; background-color: lightgreen;">
    Este div está centrado y tiene un ancho del 70% del contenedor, con un máximo de 500px.
</div>
        

Ejemplos Visuales

Este div está centrado y tiene un ancho del 70% del contenedor, con un máximo de 500px.

---

La propiedad position

Descripción general de la propiedad position en CSS y cómo afecta la ubicación de los elementos en el documento.

<div style="position: relative; top: 20px; left: 30px; background-color: lightblue;">
    Este div se mueve 20px hacia abajo y 30px hacia la derecha con respecto a su posición original.
</div>
        

Ejemplos Visuales

Este div se mueve 20px hacia abajo y 30px hacia la derecha con respecto a su posición original.

---

position: static;

Descripción de position: static;, el valor predeterminado de la propiedad position en CSS.

<div style="position: static; background-color: lightblue;">
    Este div se encuentra en su posición normal dentro del flujo del documento.
</div>
        

Ejemplos Visuales

Este div se encuentra en su posición normal dentro del flujo del documento.

---

position: relative;

Explicación de position: relative; y cómo permite ajustar la posición de un elemento respecto a su posición normal.

<div style="position: relative; left: 20px; top: 10px; background-color: lightblue;">
    Este div se mueve 20px a la derecha y 10px hacia abajo desde su posición normal.
</div>
        

Ejemplos Visuales

Este div se mueve 20px a la derecha y 10px hacia abajo desde su posición normal.

---

position: fixed;

Definición de position: fixed;, utilizado para fijar elementos en un lugar específico de la pantalla al desplazarse. Sin embargo, en este caso, se quiere fijar dentro de su contenedor.

<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 20px; background-color: lightblue;">
        Este div está fijado dentro de su contenedor, a 10px desde la parte superior y 20px desde la izquierda.
    </div>
</div>
        

Ejemplos Visuales

Este div está fijado dentro de su contenedor, a 10px desde la parte superior y 20px desde la izquierda.

---

position: absolute;

Descripción de position: absolute;, que permite posicionar un elemento en relación con el elemento contenedor posicionado más cercano.

<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 20px; background-color: lightblue;">
        Este div está posicionado 10px desde la parte superior y 20px desde la izquierda de su contenedor.
    </div>
</div>
        

Ejemplos Visuales

Este div está posicionado 10px desde la parte superior y 20px desde la izquierda de su contenedor.

---

position: sticky;

Uso de position: sticky;, que permite que un elemento cambie entre relative y fixed al desplazarse.

<div style="height: 200px; background-color: lightgray;">
    <div style="position: sticky; top: 0; background-color: lightblue;">
        Este div se mantiene en la parte superior cuando se desplaza.
    </div>
</div>
                

Este div se mantiene en la parte superior cuando se desplaza.

---

Posicionar texto en una imagen

Ejemplo de cómo posicionar texto encima de una imagen utilizando la propiedad position junto con otros estilos.

<div style="position: relative; width: 100%; height: 300px; background-image: url('https://via.placeholder.com/800x300');">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px;">
        Este es un texto sobre la imagen
    </div>
</div>
        

Ejemplos Visuales

Este es un texto sobre la imagen

---

Todas las propiedades de posicionamiento en CSS

Resumen de todas las propiedades de posicionamiento disponibles en CSS para crear diferentes efectos de disposición.

Propiedad	Descripción
position: static	Posicionamiento predeterminado, donde los elementos siguen el flujo normal del documento.
position: relative	Posiciona un elemento en relación con su posición original, permitiendo desplazamientos.
position: absolute	Posiciona un elemento en relación con el contenedor más cercano con posición relativa o absoluta.
position: fixed	Fija el elemento en una ubicación específica de la pantalla, incluso al desplazarse.
position: sticky	Permite que un elemento cambie entre relative y fixed al desplazarse.

<div style="position: static;">Elementos con position: static (predeterminado)</div>
<div style="position: relative;">Elementos con position: relative</div>
<div style="position: absolute;">Elementos con position: absolute</div>
<div style="position: fixed;">Elementos con position: fixed</div>
<div style="position: sticky;">Elementos con position: sticky</div>
        

Ejemplos Visuales

Elemento con position: static

Elemento con position: relative

Elemento con position: absolute

Elemento con position: fixed

Elemento con position: sticky

---

Ir al índice

---

---