javascript - 使用CSS在图像上定位按钮元素(Positioning button element on image using CSS)

Question

I am working with this UI design, where I created an avatar image and also an upload button.

(我正在使用此UI设计，在其中创建了头像图片和上传按钮。)

My challenge is positioning the upload button on the image as shown below

(我的挑战是将上传按钮定位在图片上，如下所示)

expectation

(期望)

but this is what I came up with

(但这就是我想出的)

 document.querySelector('#btnOpenFileDialog').addEventListener('click', function() { document.querySelector('#fileLoader').click(); }); 

 .image-cropper { display: inline-block; border-radius: 50%; border: 1px solid #f2f2f2; overflow: hidden; } img { max-width: 100%; height: auto; } .edit-img-btn { position: absolute; color: white; font-size: .5rem; width: 22px; height: 22px; padding: 5px; border: 0; border-radius: 50%; background: #4169E2; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21); } .edit-img-btn i { font-size: 13px; } 

 <span class="image-cropper" style=" width: 150px; height: 150px;"> <img src="assets/images/avatar.jpg" alt=""> </span> <input type="file" id="fileLoader" style="display: none;" /> <button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button> 

  ask by Ojay translate from so

Answer 1

If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs.

(如果将所有元素都放在带有position: relative的嵌入式块元素内，则可以调整位置以适合您的需要。)

Below is an example.

(下面是一个例子。)

 document.querySelector('#btnOpenFileDialog').addEventListener('click', function() { document.querySelector('#fileLoader').click(); }); 

 /*wrapper with position: relative */ .image-wrapper { position: relative; } .image-cropper { display: inline-block; border-radius: 50%; border: 1px solid #f2f2f2; overflow: hidden; } img { max-width: 100%; height: auto; } .edit-img-btn { position: absolute; bottom: 5px; /* 5px up from the bottom */ right: 35px; /* 35px in from the right */ color: white; font-size: .5rem; width: 22px; height: 22px; padding: 5px; border: 0; border-radius: 50%; background: #4169E2; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21); } .edit-img-btn i { font-size: 13px; } 

 <span class="image-wrapper"> <span class="image-cropper" style=" width: 150px; height: 150px;"> <img src="https://via.placeholder.com/150" alt=""> </span> <button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button> <input type="file" id="fileLoader" style="display: none;" /> </span>