Elementos superpuestos

Hola a todos, tengo un problema una imagen se me sobre pone ! encima de mi cuadro de texto, qu epuedo hacer para solucionar? les agradeceria la ayuda

error

este es el style

*{ margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body{ background-color: #f4f4fc; }

header{ width: 100%; height: 70px; }

.logo{ width: 100px; height: 50px; padding-top: 20px; padding-left: 40px; }

main{ position: absolute; width: 100%; height: 90%; display: flex; justify-content: space-between; }

.contenedorcajatexto{ position: absolute; left: 200px; top: 100px; padding-left: 100px; width: 1080px; height: 600px; }

.cajatexto{ width: 80%; height: 100%; border: none; background-color: #f4f4fc; cursor: pointer; color: #0A3871; font-size: 32px; font-weight: 400; font-family: 'Inter', sans-serif; }

.cajatexto::placeholder{ color: #0A3871; }

.alerta{ position: absolute; top: 750px; left: 370px; display: flex; color: #495057; }

.contenedor-botones{ position: absolute; top: 800px; height: 80px; padding-left: 15%; padding-top: 15px; }

.btn-encriptar{ width: 328px; height: 67px; border-radius: 24px; background-color: #0A3871; color: white; font-size: 16px; font-weight: 400; font-family: 'Inter', sans-serif; border: none; margin-right: 20px; cursor: pointer; }

.btn-desencriptar{ width: 328px; height: 67px; border-radius: 24px; background-color: #D8DFE8; color: #0A3871; font-size: 16px; font-weight: 400; font-family: 'Inter', sans-serif; border: 1px solid #0A3871; cursor: pointer; }

.seccion2{ display: block; position: relative; width: 400px; height: 840px; right: 200px; padding-right: 20px; background-color: #ffffff; box-sizing: border-box; border-radius: 32px; box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.50); }

.contenedormunieco{ position: absolute; left: 30px; top: 180px; box-sizing: border-box; padding-top: 50px; }

.contenedor-parrafo{ position: absolute; box-sizing: border-box; top: 570px; left: 40px; }

.contenedor-parrafo h3{ font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; text-align: center; color: #343A40; }

.contenedor-parrafo p{ font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; text-align: center; color: #495057; padding-top: 20px; }

.contenedor-resultado{ position: absolute; bottom: 330px; width: 320px; height: 450px; padding: 0; box-sizing: border-box; margin-left: 25px; }

.contenedor-resultado p{ color: #495057; font-size: 25px; }

.contenedor-copiar{ display: flex; position: absolute; bottom: 400px; top: 700px; background-color: aqua; padding-left: 40px; }

.btn-copiar{ width: 328px; height: 67px; border-radius: 24px; background-color: #ffffff; color: #0A3871; font-size: 16px; font-weight: 400; font-family: 'Inter', sans-serif; border: 1px solid #0A3871; cursor: pointer; position: relative; top: 50px; right: 4px; }

.ocultar{ display: none; }

Hola Jhojan,

Gracias por compartir tu duda. Parece que estás teniendo un problema con una imagen que se superpone a tu cuadro de texto. Para solucionarlo, puedes utilizar la propiedad "z-index" en tu CSS.

El "z-index" determina el orden de apilamiento de los elementos en una página web. Por defecto, todos los elementos tienen un valor de "z-index" de 0, pero puedes asignarles un valor mayor para que se muestren por encima de otros elementos.

En tu caso, podrías agregar la siguiente regla CSS a tu clase ".contenedorcajatexto" para asegurarte de que se muestre por encima de la imagen:

.contenedorcajatexto{
    position: absolute;
    left: 200px;
    top: 100px;
    padding-left: 100px;
    width: 1080px;
    height: 600px;
    z-index: 1; /* Agrega esta línea */
}

De esta manera, el cuadro de texto debería mostrarse por encima de la imagen.

Espero que esta solución te sea útil. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu proyecto!

Espero haber ayudado y buenos estudios! ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)

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