Posicionamiento en CSS: Static, Absolute y Relative

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:26

Posicionamiento en CSS: Static, Absolute y Relative

Curso Definitivo de HTML y CSS

Clase 38 de 56

Clase 38 / 56

Recursos

¿Qué es position en CSS y por qué es importante?

Position es una propiedad fundamental en CSS que nos permite controlar la ubicación de los elementos dentro de una página web. Comprender cómo funciona esta propiedad es crucial para manipular el diseño de nuestros proyectos de manera efectiva. Todos los elementos HTML vienen con position: static por defecto, lo que significa que se mantienen en el lugar asignado originalmente en el flujo del documento, y no se moverán aunque hagamos scroll en la página.

Existen otras propiedades de position, como absolute, relative, fixed y sticky, que ofrecen comportamientos distintos y nos permiten crear diseños más dinámicos. Explorar estas propiedades y aprender a utilizarlas nos permite agregar interactividad y estilo a nuestros diseños.

¿Cómo configurar y visualizar posiciones en CSS?

Antes de aplicar propiedades de position, es útil entender cómo se estructuran nuestros documentos HTML y CSS. En un proyecto básico como este:

<div class="parent">
  <div class="box" id="1">1</div>
  <div class="box" id="2">2</div>
  <div class="box" id="3">3</div>
  <div class="box" id="4">4</div>
</div>

Se puede agregar estilos con CSS para ver claramente los cambios de posición:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  border: 2px dotted black;
  display: inline-block;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

#2 {
  background-color: green;
}

Con esta configuración básica, todos los elementos se presentan en una línea, con el segundo div destacado en verde. A partir de aquí, puedes jugar con diferentes propiedades position.

¿Qué diferencias hay entre static, absolute y relative?

static: Es la posición por defecto de todos los elementos. No permite modificar la posición del elemento en relación a su posición original en el documento.
absolute: Esta propiedad permite a un elemento posicionarse respecto al contenedor posicionado más cercano, lo que significa que puede salir del flujo normal del documento y aparecer sobre otros elementos. Por ejemplo:
```
#2 {
  position: absolute;
}
```
En este caso, el div con id 2 se posiciona sobre los demás.
relative: Permite desplazar un elemento desde su posición original sin alterar el flujo del documento. Puedes especificar el desplazamiento usando propiedades como top, bottom, left y right. Ejemplo:
```
#2 {
  position: relative;
  bottom: 15px;
}
```
Esto moverá el div hacia arriba 15 píxeles, pero mantendrá su espacio dentro del cuadro contenedor.

¿Cómo usar el conocimiento de position para resolver un desafío?

Para practicar el uso de estas propiedades, intenta replicar un diseño simple donde un contenedor aparece sobre otro. Usa position: absolute o position: relative basado en lo que hemos visto.

Este tipo de desafíos son fantásticos para fortalecer tu comprensión del posicionamiento en CSS y habilitarte para crear diseños más complejos y visualmente atractivos. Si logras completarlo, compártelo y observa cómo tus habilidades van tomando forma al practicar y probar diferentes configuraciones. ¡Continúa experimentando y aprendiendo, y nos veremos en la próxima lección!

Usuario anónimo

User

Hace 6 años

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <main class="main">
        <div class="container">
            <figure>
                <img src="./img/one-piece.jpg" alt="Imagen de one piece">
            </figure>
            <div class="description">
                <h1 class="description-title">One Piece</h1>
                <p class="description-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur, corporis corrupti maxime porro velit. Beatae odio velit vitae atque et nam vel, nulla aperiam cum ducimus, quia magnam totam!</p>
            </div>
        </div>
    </main>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid red; */
}

.container {
    background-color: #f5f2f2;
    position: relative;
    height: 550px;
    border-radius: 1rem;
    overflow: hidden;
}

.container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.description {
    background-color: white;
    width: 80%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
    padding: 2rem;
    -webkit-box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
    -moz-box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
    box-shadow: -3px 5px 5px 0px rgba(219,219,219,1);
}

.description-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1.3rem;
}

.description-text {
    font-size: 1.7rem;
    line-height: calc(1.7rem + 20%);
    text-align: justify;
}

Usuario anónimo

User

Hace 6 años

Me sirvio mucho tu aporte, comparto el mio.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/display/style.css">
</head>
<body>
    <main class="main">
        <div class="container">
            <figure>
                <img src="/display/images/maxresdefault.jpg" alt="Imagen de perrito blanco">
            </figure>
            <div class="description">
                <h1 class="description-title">Perrito</h1>
                <p class="description-text">Soy un lindo perrito!</p>
            </div>
        </div>
    </main>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
   transform: translate(-50%, -50%); 
    /* border: 1px solid red; */
}

.container {
    background-color: #f5f2f2;
    position: relative;
    height: 550px;
    border-radius: 1rem;
    overflow: hidden;
}

.container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.description {
    background-color: white;
    width: 80%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
    padding: 3rem;
}

.description-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1.3rem;
}

.description-text {
    font-size: 1.7rem;
    line-height: calc(1.7rem + 20%);
    text-align: justify;
}

Usuario anónimo

User

Hace 6 años

Me encanta!

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Posicionamiento en CSS: Static, Absolute y Relative