Removing a div or a class affect another div - html

Question

As a beginner this bug seems pretty strange and since i can't put all code here(large) I will be happy to even hear where to begin.
If more code needed I will provide.
I have this :
<div class="labeledInput">
<label class="font">Tap To Add Your Photo:</label>
<div class="imagePreview logoPreview" id="logoPreview" style="background-image: url(images/Holder.png);">
<input type="file" id="logoPreview">
</div>
</div>
If I remove this row (and only this) :
<div class="imagePreview logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">
or even remove the class imagePreview from it, or set it without a class at all:
<div class="logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">
Then another button that is far away , turns to be a file upload button when clicked, instead of just a button that scroll (using JS) when clicked.
This is the affected button(not related at all to the code above) :
<div class="nextButton">
<input type="image" src="https://picsum.photos/50/50" onclick='nextButton()'/>
</div>
EDIT :
I found that in my CSS, if I remove this style - the bug will not happen :
.imagePreview img
{
max-width: 100%;
pointer-events: none;
}
//***** this one if removed solve the problem but make an ugly button*****
[type="file"] {
cursor: pointer;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Answer 1

add position as relative to parent class
.imagePreview{
position: relative;
}