[Duda] Challenge | Alura Latam - Cursos online de tecnologia

[Duda] Challenge

Hola, buenas tardes, ¿es posible acceder a una tutoría para resolver una duda con respecto al challenge? Este es mi diseño hasta el momento No se ¿por qué? pasa esto, se sale el muñeco y el texto de su lugar original aunque use position: absolute; en el css

Este es mi código en está area: .rigth { z-index: 2; position: absolute; width: 400px; height: 944px; left: 1000px; top: 40px;

/* White */

background: #FFFFFF;
/* shadow */

box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08);
border-radius: 32px;

}

.muneco_1 { z-index: 1; position: absolute; width: 336px; height: 304px; left: 1032px; top: 283px; }

.internal-rigth { z-index: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0px; gap: 16px;

position: absolute;
width: 336px;
height: 122px;
left: 1032px;
top: 631px;

}

#tex1 { width: 336px; height: 58px;

font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 120%;
/* or 29px */

text-align: center;

/* Gray/gray-500 */

color: #343A40;


/* Inside auto layout */

flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;

}

#tex2 { width: 336px; height: 48px;

font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
/* or 24px */

text-align: center;

/* Gray/gray-400 */

color: #495057;


/* Inside auto layout */

flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

}

Hola Holmes,

Entiendo que está teniendo problemas con el posicionamiento del dummy en el documento, ¿verdad?

Bueno, hay algunas formas de resolver este problema, pero mi sugerencia sería verificar si en el archivo HTML, el muñeco está dentro de ese cuadrado blanco que creo que es un div.

Aquí hay una sugerencia de lo que se puede hacer:

<div class="resultado">
    <img src="ruta/de/la/imagen.png" class="muneco"></img>
    <p class="texto">Un texto</p>
</div>

Luego, para que la position: absolute funcione de la manera que desea, demos una position: relative al elemento principal del muñeco, que en este caso es el div en blanco. Esto cambiará el posicionamiento absoluto del muñeco de toda la pantalla al cuadrado blanco solamente.

.resultado {
    /* otros estilos */
    position: relative;
}

.muneco {
    /* otros estilos */
    position: absolute;
    top: 50px;
}

¡Espero haber ayudado!

¡Hasta la próxima!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!