Introducción a las Hojas de Estilo en Cascada (CSS)

Las Hojas de Estilo en Cascada, o CSS (por sus siglas en inglés, Cascading Style Sheets), son un lenguaje fundamental para el diseño web. Su propósito principal es controlar la presentación y el aspecto visual de un documento escrito en HTML o XML. CSS permite separar el contenido de la estructura de la página de su estilo, lo que facilita el mantenimiento y mejora la flexibilidad del desarrollo web. A diferencia de los lenguajes compilados, CSS es interpretado directamente por los navegadores.

Adoptar CSS en el desarrollo web ofrece múltiples ventajas significativas:

  • Organización y Flexibilidad: Permite estructurar el diseño de las páginas de manera eficiente, ofreciendo una gran variedad de opciones de maquetación y una mayor adaptabilidad.
  • Control Detallado: Facilita un control preciso sobre tipografías, colores, fondos y otros efectos visuales, haciendo que las modificaciones sean más rápidas y robustas.
  • Consistencia Global: Un único archivo CSS puede gobernar el estilo de múltiples páginas dentro de un sitio web, asegurando uniformidad y permitiendo cambios de tema rápidos y globales. Imagina el HTML como el esqueleto y el CSS como la vestimenta; el mismo esqueleto puede lucir completamente diferente con distintas prendas.
  • Soporte Multi-dispositivo: CSS es compatible con una amplia gama de dispositivos, incluyendo teléfonos móviles, tablets, impresoras y televisores, adaptando la presentación según el medio.
  • Optimización y Mantenimiento: Al desacoplar la presentación de la estructura, las páginas cargan más rápido y son más fáciles de mantener, lo cual es un objetivo clave en el desarrollo moderno.

Fundamentos de la Sintaxis CSS

La sintaxis básica de CSS se compone de un selector, una propiedad y un valor. Si un selector posee múltiples propiedades, estas se separan por puntos y comas. Es crucial que toda la sintaxis, incluyendo llaves, dos puntos y puntos y comas, se escriba en formato inglés.

Métodos de Inclusión de CSS

Existen tres formas principales de integrar estilos CSS en un documento HTML, cada una adecuada para diferentes escenarios y necesidades:

1. Estilos en Línea (Inline)

Los estilos en línea se definen directamente en el atributo style de un elemento HTML. Su alcance se limita únicamente a ese elemento específico. Son útiles para aplicar estilos únicos a elementos individuales, pero su uso extensivo no es recomendable por dificultar el mantenimiento.

<div style="background-color: #f0f8ff; color: #1a1a1a; text-align: left; padding: 10px;">
    Contenido con estilo en línea
</div>

2. Estilos Incrustados (Embedded)

Los estilos incrustados se colocan dentro de la etiqueta <style>, ubicada en la sección <head> del documento HTML. El navegador carga estos estilos junto con el resto del documento. Son ideales cuando un documento HTML particular requiere estilos específicos y exclusivos para sí mismo.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Estilos Incrustados</title>
    <style>
        .contenedor-incrustado {
            background-color: #e6e6fa;
            color: #333;
            text-align: center;
            border: 1px solid #ccc;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="contenedor-incrustado">
        Este div usa estilos incrustados.
    </div>
</body>
</html>

3. Estilos Enlazados (External)

Este método consiste en definir los estilos CSS en un archivo externo con extensión .css y luego vincularlo al documento HTML usando la etiqueta <link> dentro de la sección <head>. Es la opción más recomendada para estilos que se aplicarán a múltiples páginas, permitiendo una gestión centralizada y cambios globales con facilidad.

estilos.css:

.caja-externa {
    background-color: #add8e6;
    color: #444;
    text-align: right;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
}

index.html:


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Estilos Enlazados</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="caja-externa">
        Contenido estilizado desde un archivo CSS externo.
    </div>
</body>
</html>

Selectores CSS

Los selectores CSS son patrones utilizados para seleccionar los elementos HTML a los que se aplicará un estilo. CSS ofrece una variedad de selectores para apuntar a elementos de forma precisa.

Selectores Básicos


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores Básicos</title>
    <style>
        /* Selector de ID */
        #elemento-unico {
            color: blue;
            font-weight: bold;
        }
        /* Selector de Clase */
        .texto-resaltado {
            background-color: yellow;
        }
        /* Selector de Etiqueta */
        p {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p id="elemento-unico">Este párrafo tiene un ID y estilos específicos.</p>
    <p class="texto-resaltado">Este párrafo está resaltado con una clase.</p>
    <p>Este es un párrafo normal.</p>
    <span class="texto-resaltado">Este texto también está resaltado.</span>
</body>
</html>

Selectores Combinados

  • Selector de Descendientes: Selecciona elementos que son descendientes de otro elemento (no necesariamente hijos directos).
  • Selector de Hijos: Selecciona elementos que son hijos directos de otro elemento.

<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores de Descendientes y Hijos</title>
    <style>
        /* Descendientes: cualquier elemento <span> dentro de .contenedor-principal */
        .contenedor-principal span {
            color: navy;
            font-style: italic;
        }
        /* Hijos directos: <li> que son hijos directos de <ul> con clase .lista-elementos */
        .lista-elementos > li {
            list-style-type: square;
            color: green;
        }
    </style>
</head>
<body>
    <div class="contenedor-principal">
        <p>Un párrafo con <span>texto</span> dentro.</p>
        <div>
            <p>Otro <span>párrafo</span> anidado.</p>
        </div>
    </div>
    <ul class="lista-elementos">
        <li>Elemento 1</li>
        <li><span>Sub-elemento</span></li>
        <li>Elemento 2</li>
    </ul>
</body>
</html>
  • Selector de Adyacencia General (~): Selecciona elementos hermanos que comparten el mismo padre y siguen al primer elemento especificado.
  • Selector de Adyacencia Directa (+): Selecciona solo el elemento hermano que sigue inmediatamente al primer elemento especificado.

<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores de Hermanos</title>
    <style>
        /* Todos los <div> hermanos de #elemento-base */
        #elemento-base ~ div {
            border: 1px dashed purple;
            margin-top: 5px;
        }
        /* Solo el <p> inmediatamente después de #elemento-base */
        #elemento-base + p {
            background-color: lightcoral;
            padding: 5px;
        }
    </style>
</head>
<body>
    <span id="elemento-base">Base</span>
    <p>Párrafo adyacente</p>
    <div>Div hermano 1</div>
    <div>Div hermano 2</div>
    <p>Otro párrafo hermano</p>
</body>
</html>

Selectores de Atributo

Permiten seleccionar elementos basándose en la presencia o el valor de sus atributos HTML.

/* Selecciona cualquier elemento con el atributo 'data-tema' */
[data-tema] {
    border-bottom: 2px solid grey;
}
/* Selecciona elementos <input> con type="password" */
input[type="password"] {
    background-color: #f2f2f2;
}
/* Selecciona elementos <a> cuyo href termina con ".pdf" */
a[href$=".pdf"] {
    color: red;
    font-weight: bold;
}
/* Selecciona elementos <div> cuyo class contiene "tarjeta" */
div[class*="tarjeta"] {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores de Atributo</title>
    <style>
        [data-info] {
            border-left: 3px solid #8a2be2;
            padding-left: 5px;
        }
        input[type="email"] {
            border: 1px solid blue;
        }
        a[href^="https://"] {
            color: navy;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div data-info="importante">Información relevante aquí.</div>
    <input type="text" placeholder="Nombre">
    <input type="email" placeholder="Correo electrónico">
    <p>Visita <a href="https://www.ejemplo.com">nuestro sitio seguro</a>.</p>
    <p>Descarga <a href="documento.doc">este documento</a>.</p>
</body>
</html>

Pseudo-Clases

Las pseudo-clases permiten aplicar estilos a elementos basándose en su estado o posición en el árbol del documento.

  • Pseudo-clases para enlaces (:link, :visited, :hover, :active):
a:link {
    color: #0000ff; /* Azul, enlace no visitado */
}
a:visited {
    color: #800080; /* Morado, enlace visitado */
}
a:hover {
    color: #ff4500; /* Naranja rojizo, al pasar el ratón */
    text-decoration: underline;
}
a:active {
    color: #008000; /* Verde, al hacer clic */
}
  • Pseudo-clases estructurales (:first-child, :last-child, :nth-child()) y pseudo-elementos (::before, ::after):

<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-Clases y Pseudo-Elementos</title>
    <style>
        .lista-personalizada li:first-child {
            font-weight: bold;
            color: navy;
        }
        .lista-personalizada li:last-child {
            font-style: italic;
            color: darkgreen;
        }
        .nota::before {
            content: "[INFO] ";
            color: blue;
            font-weight: bold;
        }
        .despedida::after {
            content: " ¡Hasta pronto!";
            color: grey;
            font-style: italic;
        }
    </style>
</head>
<body>
    <ul class="lista-personalizada">
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento</li>
        <li>Último elemento de la lista</li>
    </ul>
    <p class="nota">Este es un mensaje importante.</p>
    <span class="despedida">Gracias por su visita.</span>
</body>
</html>

Herencia y Especificidad de CSS

Herencia

La herencia en CSS es un mecanismo por el cual ciertas propiedades CSS se transmiten automáticamente de un elemento padre a sus descendientes. Por ejemplo, si se define un color de texto para el <body>, los párrafos y otros elementos anidados heredarán ese color, a menos que se les aplique un estilo diferente directamente.

body {
    font-family: 'Verdana', sans-serif;
    color: #333;
}

Todos los elementos dentro del <body> heredarán estas propiedades, salvo que se anulen. Sin embargo, la herencia tiene una baja prioridad (peso de 0) y es fácilmente sobrescrita por cualquier regla explícitamente declarada para un elemento. Es importante notar que no todas las propiedades se heredan; propiedades como margin, padding, border y background, por ejemplo, no lo hacen.

Especificidad (Prioridad)

La especificidad determina qué regla CSS se aplica cuando múltiples reglas apuntan al mismo elemento. Las reglas se evalúan según un sistema de ponderación:

  • !important: Anula cualquier otra declaración (máxima prioridad, pero su uso debe ser limitado).
  • Estilos en línea: 1000
  • ID: 100
  • Clase, Pseudo-clase, Atributo: 10
  • Etiqueta, Pseudo-elemento: 1
  • Selector Universal (*), Herencia: 0

Cuando la especificidad es igual, prevalece la regla definida más tarde en el código.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prioridad CSS</title>
    <style>
        /* Especificidad: 1 */
        span {
            color: blue;
        }
        /* Especificidad: 10 */
        .texto-principal {
            color: green;
        }
        /* Especificidad: 100 */
        #identificador-unico {
            color: red;
        }
        /* Especificidad: 10 + 1 (clase + etiqueta) = 11 */
        div.contenedor span {
            color: purple;
        }
        /* Especificidad: 10 + 10 = 20 */
        .contenedor .texto-principal {
            color: orange;
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <span class="texto-principal" id="identificador-unico">
            Este texto muestra la prioridad de estilos.
        </span>
    </div>
</body>
</html>

En el ejemplo anterior, el texto será de color rojo debido a la alta especificidad del selector ID.

Propiedades CSS

Propiedades de Texto

  • font-style: Define el estilo de la fuente (normal, italic, oblique).
  • font-weight: Controla el grosor de la fuente (normal, bold, bolder, lighter, números de 100 a 900).
  • font-size: Establece el tamaño de la fuente (px, em, %, pt, palabras clave como medium, large).
  • font-family: Especifica una lista de fuentes preferidas para un elemento.
  • color: Define el color del texto (nombre, hexadecimal, RGB, RGBA, HSL, HSLA).
  • text-align: Alinea el texto horizontalmente (left, right, center, justify).
  • line-height: Determina la altura de cada línea de texto.
  • vertical-align: Alinea verticalmente un elemento en relación con su línea o con un elemento padre.
  • text-decoration: Añade decoraciones al texto (none, underline, overline, line-through).
p.estilo-texto {
    font-family: "Georgia", serif;
    font-size: 1.1em;
    color: #555;
    text-align: justify;
    line-height: 1.6;
    text-decoration: underline;
}

Propiedades de Fondo

  • background-color: Establece el color de fondo de un elemento. Puede ser transparent, un nombre de color, un valor hexadecimal, RGB, etc.
  • background-image: Define una imagen como fondo de un elemento. Por defecto, se repite y se posiciona en la esquina superior izquierda.
  • background-repeat: Controla cómo se repite la imagen de fondo (repeat, no-repeat, repeat-x, repeat-y).
  • background-position: Posiciona la imagen de fondo dentro del elemento (valores de X e Y, o palabras clave como top, center, bottom, left, right).
  • background (abreviatura): Permite combinar múltiples propiedades de fondo en una sola declaración. El orden no es estricto.
.caja-fondo {
    background: #f0f0f0 url('patron.png') no-repeat center center;
    padding: 30px;
}

Propiedades de Borde

Permiten controlar el estilo, grosor y color de los bordes de un elemento.

  • border-style: Define el estilo del borde (none, dotted, dashed, solid, double, etc.). Puede ser una o varias propiedades para cada lado (ej. border-style: solid dashed; para arriba/abajo y izquierda/derecha).
  • border-width: Establece el grosor del borde (medium, thin, thick o valor numérico con unidad).
  • border-color: Define el color del borde.
  • border (abreviatura): Combina estilo, grosor y color en una sola propiedad. El orden no es fijo (ej. border: 2px solid blue;).
.elemento-con-borde {
    border: 3px solid #cc00cc; /* Morado, sólido, 3px */
    border-top-left-radius: 10px; /* Esquinas redondeadas */
}

Propiedades de Lista

Ayudan a estilizar listas desordenadas (<ul>) y ordenadas (<ol>).

  • list-style-type: Establece el tipo de marcador de elemento de lista (disc, circle, square, decimal, upper-roman, none).
  • list-style-image: Permite usar una imagen personalizada como marcador de elemento de lista.
  • list-style (abreviatura): Combina list-style-type, list-style-position y list-style-image.
ul.lista-personalizada {
    list-style-type: none; /* Elimina los marcadores por defecto */
    padding-left: 0;
}
ul.lista-personalizada li::before {
    content: "★ "; /* Añade una estrella como marcador */
    color: gold;
    margin-right: 5px;
}

Propiedad display

La propiedad display controla cómo un elemento se muestra en el documento. Es fundamental para cambiar el comportamiento predeterminado de los elementos HTML y para la maquetación. Valores comunes:

  • block: El elemento ocupa todo el ancho disponible y comienza en una nueva línea (ej. <div>, <p>).
  • inline: El elemento ocupa solo el ancho necesario y no empieza en una nueva línea (ej. <span>, <a>).
  • inline-block: El elemento se comporta como inline pero permite definir ancho y alto, como un elemento block.
  • none: El elemento se oculta completamente y no ocupa espacio en el diseño.
.item-menu {
    display: inline-block; /* Permite que los ítems estén en la misma línea pero con ancho y alto */
    margin-right: 15px;
    padding: 8px 12px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}

Modelo de Caja (Box Model)

El modelo de caja CSS es un concepto esencial que describe cómo se presenta un elemento HTML en la página. Cada elemento es conceptualizado como una caja rectangular, compuesta por cuatro áreas: contenido (content), relleno (padding), borde (border) y margen (margin).

  • content: El área donde se muestra el contenido real (texto, imágenes).
  • padding (Relleno): Espacio entre el contenido y el borde del elemento. No acepta valores negativos.
  • border (Borde): Una línea que rodea el padding y el contenido.
  • margin (Margen): Espacio transparente alrededor del borde del elemento, que lo separa de otros elementos. Acepta valores negativos.

Relleno (Padding)

El padding se refiere al espacio interno entre el contenido de un elemento y sus bordes. Se puede aplicar a todos los lados o a lados específicos.

.caja-relleno {
    padding: 20px; /* Relleno de 20px en todos los lados */
    padding: 10px 20px; /* 10px arriba/abajo, 20px izquierda/derecha */
    padding: 5px 10px 15px; /* 5px arriba, 10px izquierda/derecha, 15px abajo */
    padding: 1px 2px 3px 4px; /* 1px arriba, 2px derecha, 3px abajo, 4px izquierda */

    /* También se puede establecer por separado: */
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

Margen (Margin)

El margin es el espacio externo que separa un elemento de otros elementos adyacentes. Es crucial para el espaciado y la alineación de elementos en el diseño.

.caja-margen {
    margin: 30px; /* Margen de 30px en todos los lados */
    margin: 10px auto; /* Centra el elemento horizontalmente (para elementos de bloque con ancho definido) */

    /* También se puede establecer por separado: */
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 25px;
    margin-right: 25px;
}

Un uso común de margin es margin: 0 auto; para centrar horizontalmente elementos de bloque que tienen un width definido dentro de su contenedor padre.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Modelo de Caja - Margen y Relleno</title>
    <style>
        body { margin: 0; padding: 0; } /* Resetear márgenes y rellenos por defecto */
        .contenedor-principal {
            width: 90%;
            max-width: 800px;
            border: 2px solid #5a5a5a;
            margin: 50px auto; /* Centrado horizontalmente con margen superior/inferior */
            background-color: #f9f9f9;
            padding: 20px;
        }
        .elemento-interno {
            width: 45%;
            height: 80px;
            background-color: #a0c4ff;
            margin: 10px; /* Margen alrededor de cada elemento interno */
            padding: 15px;
            border: 1px dashed #666;
            box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
        }
    </style>
</head>
<body>
    <div class="contenedor-principal">
        <div class="elemento-interno">Caja Uno</div>
        <div class="elemento-interno">Caja Dos</div>
    </div>
</body>
</html>

Propiedad float

La propiedad float es fundamental para crear diseños de varias columnas y para envolver texto alrededor de imágenes.

Flujo Normal del Documento

El flujo normal del documento es la forma predeterminada en que los elementos se organizan en una página HTML:

  • Los elementos de bloque se apilan verticalmente, ocupando todo el ancho disponible.
  • Los elementos en línea se disponen horizontalmente, uno al lado del otro, dentro de la misma línea.

<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Flujo Normal</title>
    <style>
        .bloque-normal {
            border: 1px solid blue;
            margin-bottom: 5px;
            padding: 10px;
        }
        .inline-normal {
            border: 1px solid green;
            margin-right: 5px;
            padding: 5px;
            display: inline;
        }
    </style>
</head>
<body>
    <div class="bloque-normal">Div de Bloque 1</div>
    <p class="bloque-normal">Párrafo de Bloque 2</p>
    <span class="inline-normal">Span en línea 1</span>
    <a href="#" class="inline-normal">Enlace en línea 2</a>
</body>
</html>

Modelo de Flotación

Al aplicar float a un elemento, este se saca del flujo normal del documento y se desplaza hacia la izquierda o la derecha dentro de su contenedor. Los elementos adyacentes se ajustarán alrededor del elemento flotado.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Elementos Flotados</title>
    <style>
        .caja-flotada {
            width: 150px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            background-color: #ffe0b2;
            border: 1px solid orange;
        }
        .izquierda {
            float: left;
        }
        .derecha {
            float: right;
        }
    </style>
</head>
<body>
    <div class="caja-flotada izquierda">Flota Izquierda</div>
    <div class="caja-flotada derecha">Flota Derecha</div>
    <p>Este es un párrafo que sigue a los elementos flotados.
       Notará cómo se ajusta alrededor de ellos en el flujo normal,
       ocupando el espacio restante.</p>
</body>
</html>

Efecto de Envoltura de Texto (Text Wrapping):


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Envoltura de Texto</title>
    <style>
        .imagen-miniatura {
            float: left;
            margin-right: 15px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 5px;
        }
        .parrafo-con-imagen {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="parrafo-con-imagen">
        <img src="https://via.placeholder.com/150" alt="Placeholder" class="imagen-miniatura">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>
</html>

Limpieza de Flotados (Clearing Floats)

Cuando los elementos flotan, pueden causar que su contenedor padre "colapse" (no contenga la altura de los hijos flotados), lo que puede romper el diseño. Para evitar esto, es necesario "limpiar" los flotados.

La propiedad clear es utilizada para controlar el comportamiento de los elementos en relación con los flotados anteriores:

  • clear: left;: El elemento no permitirá flotados a su izquierda.
  • clear: right;: El elemento no permitirá flotados a su derecha.
  • clear: both;: El elemento no permitirá flotados ni a su izquierda ni a su derecha.
  • clear: none;: Valor por defecto, permite flotados en ambos lados.

Una técnica común para limpiar flotados en el contenedor padre es el "clearfix hack":

.contenedor-clearfix::after {
    content: ""; /* Contenido vacío */
    display: table; /* O block, dependiendo del contexto */
    clear: both; /* Limpia flotados en ambos lados */
}

Otra opción es aplicar overflow: hidden; (o auto) al contenedor padre, aunque esto puede tener efectos secundarios si el contenido real del padre excede sus límites.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Limpieza de Flotados</title>
    <style>
        .contenedor-flotados {
            border: 2px solid #336699;
            background-color: #f0f8ff;
            /* Método 1: overflow para limpiar flotados */
            /* overflow: hidden; */
        }
        .elemento-flotante {
            width: 150px;
            height: 100px;
            background-color: #87ceeb;
            margin: 10px;
            float: left;
            text-align: center;
            line-height: 100px;
        }
        .pie-pagina {
            background-color: #a9a9a9;
            height: 50px;
            margin-top: 20px;
            /* Método 2: clear para limpiar flotados en un elemento hermano */
            /* clear: both; */
        }
        /* Método 3: clearfix hack para el contenedor */
        .contenedor-clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <h2>Contenedor con flotados (sin limpiar)</h2>
    <div class="contenedor-flotados">
        <div class="elemento-flotante">Flotante 1</div>
        <div class="elemento-flotante">Flotante 2</div>
    </div>
    <div class="pie-pagina">Este pie de página podría subir si no se limpian los flotados.</div>

    <h2>Contenedor con flotados (limpiados con clearfix)</h2>
    <div class="contenedor-flotados contenedor-clearfix">
        <div class="elemento-flotante">Flotante A</div>
        <div class="elemento-flotante">Flotante B</div>
    </div>
    <div class="pie-pagina">Este pie de página está correctamente debajo.</div>
</body>
</html>

Propiedad position

La propiedad position es fundamental para controlar la ubicación exacta de los elementos en una página web, permitiendo crear diseños complejos superpuestos o fijos. Actúa como capas en un editor de imágenes. Los valores principales son static (por defecto), relative, absolute y fixed.

Una vez un elemento tiene un valer de position diferente de static, puede ser movido utilizando las propiedades de desplazamiento: top, right, bottom y left.

Posicionamiento Relativo (relative)

Un elemento con position: relative; permanece en el flujo normal del documento, pero puede ser desplazado de su posición original usando top, right, bottom o left. Los demás elementos no se ven afectados por este desplazamiento; el espacio original del elemento se mantiene.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Posicionamiento Relativo</title>
    <style>
        .caja {
            width: 100px;
            height: 100px;
            border: 1px solid #333;
            background-color: #f0f0f0;
            margin: 10px;
            display: inline-block;
        }
        .caja-relativa {
            position: relative;
            top: 20px;
            left: 30px;
            background-color: #add8e6;
            z-index: 1; /* Para que se vea por encima de otros si se superponen */
        }
    </style>
</head>
<body>
    <div class="caja">Caja Normal 1</div>
    <div class="caja caja-relativa">Caja Relativa</div>
    <div class="caja">Caja Normal 2</div>
</body>
</html>

Posicionamiento Absoluto (absolute)

Un elemento con position: absolute; se saca completamente del flujo normal del documento. Se posiciona en relación con su ancestro posicionado más cercano (es decir, un ancestro con position: relative, absolute o fixed). Si no hay un ancestro posicionado, se posiciona en relación con el <body>. Los elementos adyacentes se comportan como si el elemento absoluto no existiera.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Posicionamiento Absoluto</title>
    <style>
        .contenedor-padre {
            width: 300px;
            height: 200px;
            border: 2px dashed #a00;
            margin: 50px;
            position: relative; /* Clave para que el hijo absoluto se posicione respecto a este */
        }
        .elemento-absoluto {
            width: 100px;
            height: 100px;
            background-color: #ffb6c1;
            border: 1px solid red;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .otro-elemento {
            width: 100px;
            height: 150px;
            background-color: #e0ffff;
            border: 1px solid blue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="contenedor-padre">
        <div class="elemento-absoluto">Elemento Absoluto</div>
        <div class="otro-elemento">Contenido Padre</div>
    </div>
</body>
</html>

Posicionamiento Fijo (fixed)

Un elemento con position: fixed; se posiciona en relación con la ventana de visualización del navegador. Permanece en la misma posición incluso cuando el usuario desplaza la página. También se saca del flujo normal del documento.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Posicionamiento Fijo</title>
    <style>
        body {
            margin: 0;
            height: 2000px; /* Para generar scroll */
            background-color: #f5f5f5;
        }
        .barra-fija {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 50px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .contenido-principal {
            padding-top: 70px; /* Espacio para la barra fija */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="barra-fija">Barra de navegación fija</div>
    <div class="contenido-principal">
        <h1>Bienvenido al Contenido</h1>
        <p>Desplaza hacia abajo para ver el efecto de la barra fija.</p>
        <p style="margin-top: 1000px;">Más contenido aquí...</p>
    </div>
</body>
</html>

Etiquetas: css HTML Diseño Web Maquetación selectores CSS

Publicado el 8-3 10:11

Etiquetas populares

©2026 Friki Work