Clickable div with z-index - css

Question

I want to make the same design below
But I have a problem with the floating div which is the camera icon.
It should be clickable. I put z-index so it will be on top of the image that will change. I want to make all div to be clickable.
Hope you guys can help me.
Thanks!
here's my code
<article class="RegistrationInfo__Section media">
<div class="RegistrationInfo__Section--image media-left">
<div class="field">
<span class="file-bg">
<span
class="icon is-large"
v-if="formObject.image"
>
<img v-if src="~#/assets/images/camera.png">
</span>
<img v-else src="~#/assets/images/camera.png">
</span>
<div class="file is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="image"
ref="input"
#change="validateAndProcessImage"
>
<span class="file-cta">
<span class="file-icon">
<img
v-if="formObject.image"
:src="`/api/files/${formObject.image}`"
>
<img v-else src="~#/assets/images/profile_off.png">
</span>
</span>
</label>
</div>
<p v-if="formErrors.imageFiles" class="help is-danger">{{ formErrors.imageFiles[0] }}</p>
</div>
</div>
</article>
Here's my SCSS file.
.RegistrationInfo {
#at-root #{&}__Section {
#at-root #{&}--image {
margin-right: 2rem;
.field {
position: relative;
.file-bg {
position: absolute;
z-index: 1;
right: -10px;
width: 50px;
height: 50px;
.icon i {
cursor: pointer;
margin: auto;
}
}
.file {
&.is-boxed {
.file-icon {
height: 128px;
width: 128px;
margin-right: 0;
}
.file-cta {
padding: 0;
border-radius: 50%;
justify-content: center;
img {
height: 128px;
width: 128px;
border-radius: 50%;
object-fit: cover;
object-position: top;
}
}
}
}
.help {
max-width: 128px;
}
}
}

Answer 1

The problem seems to be with the z-index you did set.
By default, all page elements have a z-index of 1 unless otherwise specified. Provided that .file-bg is your camera icon, changing the z-index to 2 would make your div clickable.