El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Propiedad Position de CSS

Siguiente ►
►

La propiedad position en CSS es fundamental para controlar el flujo y la disposición de los elementos en una página web. Esta propiedad permite especificar cómo un elemento debe ser posicionado en el documento, y puede tomar varios valores que determinan su comportamiento.

Valores de la Propiedad position

  1. static

Este es el valor por defecto. Los elementos con position: static se posicionan de acuerdo con el flujo normal del documento. No se ven afectados por las propiedades top, right, bottom o left.

.elemento {
  position: static;
}

  1. relative

Un elemento con position: relative se posiciona de acuerdo con el flujo normal del documento, pero luego se ajusta en función de las propiedades top, right, bottom o left. El espacio dejado en el flujo del documento es el espacio original del elemento.

.elemento {
  position: relative;
  top: 10px;
  left: 20px;
}

  1. absolute

Un elemento con position: absolute se posiciona con respecto a su contenedor posicionado más cercano (es decir, el primer ancestro que no tenga position: static). Si no hay tal contenedor, se posiciona con respecto al elemento <html>.

.contenedor {
  position: relative;
}

.elemento {
  position: absolute;
  top: 10px;
  left: 20px;
}

  1. fixed

Un elemento con position: fixed se posiciona con respecto a la ventana del navegador. No se desplaza cuando se hace scroll en la página.

.elemento {
  position: fixed;
  top: 0;
  right: 0;
}

  1. sticky

Un elemento con position: sticky se comporta como relative hasta que su contenedor alcanza un umbral definido por las propiedades top, right, bottom o left, momento en el cual se comporta como fixed.

.elemento {
  position: sticky;
  top: 0;
}

Ejemplos Prácticos

Ejemplo 1: relative

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Relative</title>
  <style>
    .caja {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      position: relative;
      top: 20px;
      left: 30px;
    }
  </style>
</head>
<body>
  <div class="caja"></div>
</body>
</html>

Ejemplo 2: absolute

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Absolute</title>
  <style>
    .contenedor {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      position: relative;
    }
    .caja {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      position: absolute;
      top: 20px;
      left: 30px;
    }
  </style>
</head>
<body>
  <div class="contenedor">
    <div class="caja"></div>
  </div>
</body>
</html>

Ejemplo 3: fixed

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Fixed</title>
  <style>
    .caja {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      position: fixed;
      top: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="caja"></div>
</body>
</html>

Ejemplo 4: sticky

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Sticky</title>
  <style>
    .caja {
      width: 100%;
      height: 50px;
      background-color: lightblue;
      position: sticky;
      top: 0;
    }
    .contenido {
      height: 2000px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="caja">Sticky Header</div>
  <div class="contenido"></div>
</body>
</html>

Ejercicio Práctico

Ejercicio 1: Crear un Menú Fijo

Objetivo: Crear un menú de navegación que permanezca fijo en la parte superior de la ventana del navegador.

Instrucciones:

  1. Crea un archivo HTML con una estructura básica.
  2. Añade un elemento <nav> con algunos enlaces dentro.
  3. Aplica estilos CSS para que el <nav> tenga un fondo de color y esté fijo en la parte superior de la ventana.

Código de Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menú Fijo</title>
  <style>
    nav {
      width: 100%;
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      left: 0;
      padding: 10px;
      text-align: center;
    }
    nav a {
      color: white;
      margin: 0 15px;
      text-decoration: none;
    }
    .contenido {
      margin-top: 60px; /* Para evitar que el contenido quede oculto detrás del menú */
      height: 2000px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#">Inicio</a>
    <a href="#">Acerca de</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </nav>
  <div class="contenido"></div>
</body>
</html>

Solución:

El código anterior crea un menú de navegación fijo en la parte superior de la ventana del navegador. El contenido de la página se desplaza normalmente, pero el menú permanece visible en todo momento.

Conclusión

La propiedad position en CSS es una herramienta poderosa para controlar la disposición de los elementos en una página web. Comprender cómo y cuándo usar cada valor (static, relative, absolute, fixed, sticky) es esencial para crear diseños web efectivos y responsivos. Practica con los ejemplos y ejercicios proporcionados para dominar el uso de esta propiedad.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados