Superposición de Elementos en CSS: Técnicas y Ejemplos Prácticos

Clase 12 de 28 • Curso de Creación de Páginas Web con Wordpress y No-code

Resumen

¿Cómo crear un diseño hero en tu página web?

Diseñar un apartado hero en tu sitio web es esencial para captar la atención de los usuarios de inmediato. Este elemento puede ser la carta de presentación que define la experiencia del visitante. En este artículo, te enseñaremos cómo superponer elementos utilizando HTML y CSS sin modificar el HTML base.

¿Cómo posicionar elementos con CSS?

Debemos asegurarnos de que los elementos se posicionen correctamente dentro del flujo del documento. En este caso práctico, tenemos una imagen de fondo (imagen de una computadora) y un contenedor de información que incluye una foto de perfil y una descripción. La clave está en manipular el CSS para superponer estos elementos sin alterar la estructura HTML.

¿Qué código necesitamos para superponer elementos?

Para lograr este efecto, seguimos los siguientes pasos:

Establecer un contenedor para el hero.
Definir un display inline-block para el contenedor de la imagen de fondo, asegurando que ocupe el 100% del ancho del navegador.

#hero #computadora {
  display: inline-block;
  width: 100%;
}

Posicionar el contenedor de información mediante position: absolute y ajustar su inicio con top: 0 y left: 0. Esto, junto con position: relative en el contenedor hero, asegura que el contenedor de información se sitúe correctamente encima del fondo.

#hero {
  position: relative;
}

#hero .informacion-contenedor {
  position: absolute;
  top: 0;
  left: 0;
}

¿Cómo ajustamos el estilo de los elementos superpuestos?

Una vez superpuestos los elementos, es necesario estilizar la presentación visual para mejorar la apariencia del hero:

Redimensionar y dar forma a la foto de perfil. Cambiamos su tamaño a 200 píxeles de ancho y la convertimos en un círculo usando border-radius.

#hero .informacion-contenedor .foto img {
  width: 200px;
  border-radius: 100%;
}

Separar la imagen de los bordes. Usamos márgenes para crear un espacio visual adecuado entre la imagen y el borde del contenedor.

¿Qué más se puede hacer con CSS para mejorar el diseño?

CSS nos permite realizar una variedad de ajustes estilísticos:

Agregar márgenes y espaciados: Para asegurar que el contenido no esté demasiado apretado.
Incorporar paletas de colores: Cambiar colores de fondo y texto para lograr un diseño armonioso.
Agregar transiciones: Mejorar las interacciones y la experiencia del usuario.

En definitiva, esta estrategia de diseño nos permite crear hero sections efectivas y atractivas manteniendo la estructura base del HTML. Sigue practicando y explorando más sobre CSS para perfeccionar tus habilidades de diseño web. ¡El aprendizaje no tiene límites!

Laura Valentina Diaz Ramirez

student•

Me gusta tus clases maestro me esta quedando claro todo

María Susana Bordi

student•

Idem! Me encanta como explica este profe

Carlos Eduardo Granada Galvis

student•

El profesor es increíble, la verdad pensé que se me iba a dar mucho más duro la programación, pero ahora no solo estoy aprendiendo sino que lo estoy disfrutando muchísimo.

Henry Peralta

student•

No lograba el tamaño de la imagen de perfil, pero lo logre así #hero .informacion-contenedor #foto img { border-radius: 100%; width: 200px; }

jose luis tolaba martinez

student•

me paso lo mismo nose pq no identifica solo con el ID de foto...

Karen Stepfany Chavez Perea

student•

Me está pasando lo mismo y todavía estoy intentando, voy a hacerlo así como dices. Muchas gracias.

Alejandro Ramos

student•

Wao con la explicación de lo que es absolute y relative, quedó claro!

Daniel De Lauretis

student•

Perdon eh, perooo que explicacion? No explico nada de relative. Solo dijo.. pon relative y punto

Alejandro Ramos

student•

Supongo que debe ser porque ya tengo algo de conocimiento en el tema (un poco 😅)

Pero, en resumen,

el position absolute tomará como referencia la ventana del navegador o el elemento posicionado
el position relative: estamos posicionando un elemento tomando como referencia el flujo normal (la posición por defecto) de dicho elemento.

Puedes encontrar más info aquí: Info

Oscar Guzmán

student•

Amigos tenia este error

#hero .informacion-contenedor #foto {
    width: 100px;
}

#hero .informacion-contenedor #foto img {
    border-radius: 100%;
}

Lo solucioné de esta forma, espero a alguien le sirva

#hero .informacion-contenedor #foto {
    width: 100px;
    height: 100px;
}

#hero .informacion-contenedor #foto img {
    border-radius: 100%;
    height: 100%;
}

Pablo Durán

student•

Excelente, gracias

Melborp Melborp

student•

graciasssss!!!

Jesús alfaro

student•

Gracias profe me has refrescado unos conceptos que no me había quedado claro en css

Camilo Andrés Pedroza Mesa

student•

position: Esta propiedad se utiliza para establecer la posición de un elemento en la página. Puede tomar varios valores, como static, relative, absolute, fixed, sticky, etc.
top y left: Estas propiedades se utilizan junto con position para especificar la posición exacta de un elemento. top establece la distancia desde la parte superior del elemento al borde superior del contenedor padre, mientras que left establece la distancia desde el lado izquierdo del elemento al borde izquierdo del contenedor padre.
Encimar elementos: Si varios elementos se superponen entre sí, la propiedad z-index se utiliza para determinar qué elemento debe mostrarse por encima de los demás. Un valor más alto de z-index indica que el elemento debe estar en la parte superior.

Harrys Tapasco

student•

Para el caso de una imagen de fondo que puede resultar más practico?

Hacerlo con la propiedad position:Absolute al contenedor que va a ir por encima (como en el ejemplo)?
Ponerle la propiedad Background-image al Selector #Hero?

Carlos Eduardo Gomez García

teacher•

Depende mucho. Muchas veces, por cuestiones de maquetado y diseño, es más fácil usar position, pero esto implica que usemos la imagen con la etiqueta <img />, pero esto puede no ser tan bueno...

La etiqueta <img /> tiene un significado semántico, por lo que si ponemos una imagen al aire, sin ningún significado, es posible que tengamos un mal nivel de SEO.

Por otro lado, al usar la propiedad background-image, no tendremos ningún problema a nivel de SEO, ya que CSS no tiene significado semántico, pero tenemos el inconveniente de que es un poco más complejo de diseñar.

En este caso, para no complicarnos tanto con el diseño, usamos la propiedad img con position :D

Glenda Goitia

student•

Este profesor es buenisimo, todo lo hace mas facil, podria decir que es el mejor que explica en toda esta plataforma.

rodolfo.gonzalez9356

student•

Me quedaba un ovalo en lugar de un circulo y así lo solucione.

#hero .informacion-contenedor #foto img { width:200px; height:200px; border-radius: 100%; }

Y para los que no se les hace pequeña la imagen chequen del lado de html que cada <div> tenga su </div> de cierre.

Santiago Rodríguez Ibáñez

student•

No lograba el tamaño de la imagen de perfil hasta que me di cuenta que en mi código de HTML había utilizado acentos en algunas palabras jaja, hay que tener cuidado con eso

Marco Antonio Carrera Rivera

student•

Hola. Quiero pedir su ayuda.

"No puedo avanzar por que no me reconoce el #hero #informacion-contenedor #foto, les comparto el css y html, cuando voy a la consola no me muestra los estilos aplicados a la computadora espero me puedan ayudar. CSS"

HTML

<section id="hero"> 
            <div class="imagen-container" id="computadora">
                <img src="IMAGENES/computadora.jpg" alt="computadora">
            </div>
            
            <div class="informacion-contenedor">
                <div id="imagen-container" id="foto">
                    <img src="IMAGENES/foto.jpg" alt="foto">
                </div>
                <div class="informacion">
                    <h2>Marco Antonio Carrera Rivera</h2>
                    <span>@Marco-carrera</span>

                    <p>Desarrollador web | Backend Python | Creador de proyectos</p>
                </div>
            </div>

        </section>

CSS

 /* Acá están los estilos de hero */

 #hero {
    position: relative;
 }

 #hero #computadora {
    display: inline-block;
    width: 100%;
 }

 #hero .informacion-contenedor {
   position: absolute;
   top: 0;
   left: 0;
}

#hero .informacion-contenedor #foto>img {
   width: 200px;
   border-radius: 100%;
}

Brian Steven Gutiérrez Prieto

student•

Hola Marco. Creo que es por la parte después de la foto donde hay un signo > cuando debería ser un espacio. Intenta así a ver si funciona. ¡Saludos!

jose luis tolaba martinez

student•

porque mi imagen no se achica?

Santiago Rodríguez Ibáñez

student•

También tenía el mismo problema, hasta que revisé bien mi código y me di cuenta que en mi código de HTML había usado acentos, checalo, chance sea el mismo problema.

Nicolas Ulloa

student•

A muchos les pasó que no podían modificar el estilo de la imagen lo solucioné de esta forma:

<div class="information-container">
                <div class="image-container" id="foto">
                    <img src="Imagenes/foto.png" alt="mi foto" />

Solo agregué id="foto"

Daniela Estrella Trejo

student•

La imagen no se hacia pequeña y mi hermano me ayudo y lo puso asi: #foto>img { width: 200px; border-radius: 100%; } y si funciono👌

Heber Yesid Daza Toloza

student•

MUCHAS GRACIAS!

Matias A. Mendoza

student•

El ID de un elemento en una pagina debe ser unico, que sentido tiene definir el selector "#hero #computadora" si #computador debe ser unico en el codigo?

Alirio Isea

student•

Si, la verdad funciona igual si pones solo "#computadora", supongo que tiene que ver más con temas de buenas practicas y especificidad

Angel Jossiel Perez Galaz

student•

Hola. Quiero pedir su ayuda.

No puedo avanzar por que no me reconoce el #hero #computadora, les comparto el css, cuando voy a la consola no me muestra los estilos aplicados a la computadora espero me puedan ayudar.

CSS

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

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Acá tengo estilos generales*/

.image-container {
    display: flex;
}

.image-container img {
    width: 100%;
}

/* Acá tengo los estilos del header*/

header {
    background: #1f1f1f;
    padding: 10px 50px;
}

#Montañas {
    width: 50px;
}

#Montañas img {
    border-radius: 100%;
    border: 3px solid #fff;
}

#hero #computadora {
    display: inline-block;
    width: 100%;
}

#hero .informacion-contenedor {
    position: absolute;
    top: 0;
    left: 0;
}

Oscar Andrey Martinez Calderon

student•

¿Podrías compartir tu html para revisarlo?

Angel Jossiel Perez Galaz

student•

Claro, Oscar.

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Styles.css" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Un título chido</title>
</head>
<body>
    <header>
        <div class="image-container" id="Montañas">
            <img src="Imagenes/descarga.jpg" alt="Montañas"/>
        </div>
    </header>

    <section id="Hero">

        <div class="image-container" id="computadora">
            <img src="imagenes/computadora.jpg" alt="Computadora">
        </div>

        <div class="informacion-contenedor">
             
            <div class="image-container" id="foto">
                <img src="Imagenes/ANGEL-5.JPG" alt="foto">
            </div>

            <div class="informacion">
                <h2>Angel Jossiel Perez Galaz</h2>
                <span>@jossielperez</span>

                <p>Analyst at Coppel.com | Master Business Administration | Soccer Player</p>
            </div>

        </div>

    </section>

    <main>

        <p>Actually I work in the department of Ecommerce of Coppel. I am Analist in customer and digital employee. My activities are: Analyze the KPI´s of the register in Coppel.com, Examine the NPS and TCR of the website and take accions to improve the objectives and Analyze complains of the customers using their digital accounts.</p>
       
        <ul class="social-icons">

            <li>
                <a href="#" class="social-icon" id="Linkidin">
                    <img src="Imagenes/linkedin.png" alt="Linkedin">
                </a>
            </li>

            
            <li>
                <a href="#" class="social-icon" id="Twitter">
                    <img src="Imagenes/twitter.png" alt="Twitter">
                </a>
            </li>

            <li>
                <a href="#" class="social-icon" id="Platzi">
                    <img src="Imagenes/platzi.png" alt="Platzi">
                </a>
            </li>
        </ul>
    </main>
</body> 
</html>

Marcos Soliz

student•

no logre el tamaño de la foto de perfil desde

#hero .informacion-conteiner #foto{ whdth:200px; }

quede estancado, alguna ayuda?

Mayra Alejandra Soto Nieto

student•

Hola, de acuerdo a tu codigo es width Lo tienes mal escrito, pero si algo puedes tambien darle un alto para ver las variaciones de los tamaños.

Francisco Narancio

student•

Buenas a todos. Alguno me explica que es el display y para que funciona?

Nicolas Alpargatero

student•

Un uso común de display: inline-block es para mostrar elementos de lista horizontalmente en lugar de verticalmente.

inline: Al igual que los elementos inline (como <span>), un elemento con display: inline-block puede colocarse junto a otros elementos en la misma línea. Esto significa que no agrega un salto de línea después del elemento.
block: Al igual que los elementos block (como <div>), un elemento con display: inline-block respeta los márgenes y rellenos superior e inferior. Además, puedes establecer un ancho y una altura en el elemento.

Antony Jesus Romero Garcia

student•

Si quisirea dejar la imagen de la ciomputadora de fondo en toda mi pagina, seria desde el css atraves del body... o como seria, gracias!!

Yoyman Manuel Castellar Miranda

student•

Asi es, podrías dejarlo en el body y asi ocupará toda la página