JavaScript实现图片上传预览时叠加图标保持固定位置

当前相机图标使用margin属性做偏移定位，属于常规文档流布局。未上传图片时，预览图为display:none不占据文档流空间，图标位置刚好落在容器右下角；当预览图加载显示后，会在文档流中占据150px*150px的空间，直接把排在它后面的相机图标挤出容器范围，此时设置的z-index也无法解决位置偏移问题。

使用「父相子绝」的定位方案，让图标脱离常规文档流，就不会被预览图的显示/隐藏状态影响位置：

• 给外层圆形图片容器添加position: relative，作为内部定位元素的参考基准，同时加overflow: hidden避免内容溢出圆形边界
• 移除相机图标原有margin-left、margin-top偏移属性，改用position: absolute配合right、bottom属性固定在容器右下角
• 预览图宽高改为100%适配容器，新增object-fit: cover避免非正方形图片被拉伸变形

修复后的完整代码如下：

<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; position: relative; overflow: hidden;">
                   <img id= "uploaded_image" src="#" style="display:none; width: 100%; height: 100%; border-radius: 100px; object-fit: cover;" >
                   <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; position: absolute; right: 12px; bottom: 12px;">
               </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>

调整后无论是否选中上传图片，相机图标都会始终固定在圆形图片容器的右下角位置，不会被挤出。

内容的提问来源于stack exchange，提问作者Syed_Hamza_Akbar_Ali