🎯 Ejercicio 2: Coordenadas CSS

1. Position: Relative + Coordenadas

Mueve elementos desde su posición normal usando coordenadas.

.top-20 {
    position: relative;
    top: 20px;
}

.left-30 {
    position: relative;
    left: 30px;
}

.top-20-left-30 {
    position: relative;
    top: 20px;
    left: 30px;
}

.bottom-20-right-30 {
    position: relative;
    bottom: 20px;
    right: 30px;
}

2. Position: Absolute + Coordenadas

Posiciona elementos en puntos específicos del contenedor padre.

.absolute-demo {
    position: relative;
    height: 300px;
}

.corner {
    position: absolute;
    width: 100px;
    height: 60px;
}

.top-left {
    top: 0;
    left: 0;
}

.top-right {
    top: 0;
    right: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. Position: Fixed + Coordenadas

Posiciona elementos fijos en la ventana del navegador.

.fixed-element {
    position: fixed;
    width: 80px;
    height: 60px;
    z-index: 1000;
}

.top-left-fixed {
    top: 20px;
    left: 20px;
}

.top-right-fixed {
    top: 20px;
    right: 20px;
}

.center-fixed {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottom-left-fixed {
    bottom: 20px;
    left: 20px;
}

.bottom-right-fixed {
    bottom: 20px;
    right: 20px;
}

4. Centrado con Coordenadas

Diferentes formas de centrar elementos usando coordenadas.

/* Método 1: transform */
.method1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Método 2: margin negativo */
.method2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -50px;
}

/* Método 3: todos los lados */
.method3 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

5. Layout Completo con Coordenadas

Crea un layout usando diferentes tipos de posicionamiento y coordenadas.

.layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.layout-nav {
    position: sticky;
    top: 60px;
    left: 0;
    right: 0;
    height: 40px;
}

.layout-sidebar {
    position: fixed;
    top: 100px;
    left: 0;
    bottom: 60px;
    width: 200px;
}

.layout-main {
    position: relative;
    top: 100px;
    left: 200px;
    right: 0;
    bottom: 60px;
}

.layout-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.layout-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

🎯 Ejercicio Práctico

Crea una tarjeta de perfil con los siguientes elementos:

• Una imagen de avatar posicionada absolutamente en la esquina superior izquierda
• Un badge de estado "Online" posicionado absolutamente en la esquina superior derecha
• Un botón "Seguir" posicionado absolutamente en la esquina inferior derecha
• Información del usuario centrada en la tarjeta

Online

Juan Pérez

Desarrollador Web

@juanperez

Seguir