Estoy tratando de crear una aplicación que tenga una función que permita a sus usuarios cargar imágenes desde su computadora y esa imagen elegida se muestra como vista previa. El problema con el que me encuentro es que antes de seleccionar la imagen, se superpone un botón de icono en la parte inferior derecha del elemento de imagen y cuando se elige la imagen, el botón de icono se empuja fuera del elemento de imagen. Quiero que el botón de icono permanezca en su lugar.

Aquí está el código correspondiente a esta parte:

 <div id="main-container"> <section id="customer_archetype" style="width: 500px; margin: auto"> <form method="post" action="./submit_form_data.php" style="display: flex; flex-direction: column;"> <div style="margin: auto;"> <div style="width: 150px; height: 150px; background-color: #E1E0E1; border-radius: 100px; "> <img id= "uploaded_image" src="#" style="display:none; width: 150px; height: 150px; border-radius: 100px;" > <input style="display:none" name = "archetype_image_input" id="archetype_image_input" type="file" accept="image/*"> <img src="./images/camera.png" id="cam_img" style="width:22px; height:22px; color:gray; z-index = 1; cursor: pointer ; margin-left:105px; margin-top: 125px;"> </div> </div> <div id = "input_fields" style="display: flex; flex-direction: column; margin: 10px auto; width: 400px;"> </div> </form> <div style="text-align: center;"> <button style="width: 100px" id="add-input-field-btn">Add Field</button> <button id="remove-input-field-btn">Remove Field</button> </div> </section> </div>

Y aquí está el aspecto de la salida antes de elegir la imagen:

Se elige la salida después de la imagen. Como puede ver, el ícono está apagado: