html - 删除一个 div 或一个类会影响另一个 div

Question

作为初学者，这个错误看起来很奇怪，因为我不能把所有代码都放在这里(大)我什至很乐意听到从哪里开始。如果需要更多代码，我会提供。

我有这个:

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

如果我删除这一行(并且只删除这一行):

<div class="imagePreview logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">

甚至从中删除 imagePreview 类，或者根本不设置类:

<div class="logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">

然后另一个 button far away ，点击时变成文件上传按钮，而不是点击时滚动(使用 JS)的按钮。

这是受影响的按钮(与上面的代码完全无关):

<div class="nextButton">
  <input type="image" src="https://picsum.photos/50/50" onclick='nextButton()'/>
</div>

编辑:

我发现在我的 CSS 中，如果我删除此样式 - 错误将不会发生:

.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

将position作为relative添加到父类

.imagePreview{    
    position: relative;
}