current-grade-name-input与grade-point-input布局联动问题求助

• 先排查布局模型的联动问题
  要是你用了Flexbox或Grid布局，父容器的默认规则会让子元素位置/尺寸互相影响。比如Flex容器里的子元素默认按主轴排列，调整其中一个的位置可能挤压或带动另一个。先查父容器的CSS：

  /* 看看有没有这类布局设置 */
  .parent-box {
    display: flex;
    /* 或者 display: grid; */
  }
  

  解决办法：给两个输入框的容器分别加flex: none（Flex布局下），或者直接给每个容器设置独立的position: relative，用top/left调整位置，避开布局模型的联动。

• 检查外边距/内边距的依赖
  有时候元素的margin/padding用了兄弟元素的尺寸计算（比如calc()里引用兄弟元素的高度），或者触发了外边距合并，导致移动一个另一个跟着动。查两个输入框的CSS：

  /* 别用这种依赖兄弟元素的设置 */
  #current-grade-name-input {
    margin-top: calc(var(--grade-point-input-height) - 10px);
  }
  

  改成固定数值或者基于自身的单位（比如1rem），切断依赖。

• 用绝对定位实现完全独立移动
  想让两个元素彻底互不影响，给它们的父容器设position: relative，然后给每个输入框的容器设position: absolute，这样调整top/left时就不会牵连：

  <div class="input-container" style="position: relative; height: 100px;">
    <div style="position: absolute; top: 0; left: 0;">
      <input id="current-grade-name-input" placeholder="等级名称">
    </div>
    <div style="position: absolute; top: 40px; left: 0;">
      <input id="grade-point-input" placeholder="分数">
    </div>
  </div>
  

  注意给父容器设高度，避免绝对定位元素脱离文档流导致父容器高度塌陷。

• 排查祖先元素的隐性布局规则
  哪怕放在独立div，要是某个祖先元素用了display: table、display: inline-block这类规则，也可能让子元素位置联动。逐层检查父级元素的display属性，把不必要的布局规则去掉。

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