I'm trying to create an app that has a feature that allows its users to upload images from their computer and that chosen image is displayed as preview. The problem I'm running into is that before the image is selected, an icon button is overlaid on the bottom-right of the image element and when the image is chosen the icon button is pushed off the image element. I want the icon button to stay in its place.

Here's the code pertaining to this part:

<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>

And here's the look of the output before the image is chosen:

Output after image is chosen. As you can see the icon is pushed off: