如何让子div在父div位置变动时保持固定位置，无需同步调整？

可以通过调整定位基准和父元素的偏移方式实现需求，无需同步修改子元素的top值：

核心思路 #

• 让子元素tt1的绝对定位基准改为外层的textblock（而非父元素t1），使其位置仅与textblock绑定，不受t1偏移影响。
• 父元素t1的下移用relative定位的top属性或margin-top实现，修改该值时无需调整tt1的样式。

修改后的代码 #

HTML（保持原结构不变） #

<div class="container">
  <div id='textblock'>
    <div id='t1'>
      <div id='tt1'>THIS IS A TEST</div>
    </div>
  </div>
</div>

CSS #

.container {
  width:300px;
  height:250px;
  background-color: orange;
  position:absolute;
}
#textblock {
  background-color:yellow;
  border:1px solid black;
  width:170px;
  height:170px;
  position:relative; /* 作为tt1的定位基准容器 */
  top:30px;
  left:30px;
}
#t1 {
  position:relative;
  background-color:red;
  width:100%;
  height:20px;
  top:40px; /* 直接修改此值调整t1位置，tt1无需改动 */
  overflow:hidden; /* 保留文本动画所需的隐藏效果 */
}
#tt1 {
  position:absolute;
  top:0; left:0; /* 相对于textblock顶部固定定位 */
}

原理说明 #

• textblock设置position: relative后，会成为内部绝对定位元素的基准容器，因此tt1的top:0会直接对齐textblock的顶部。
• t1通过position: relative的top属性偏移时，仅自身位置移动，不会改变tt1的定位基准，所以tt1始终固定在textblock顶部。
• 由于tt1仍处于t1的DOM结构内，给t1设置overflow:hidden后，文本动画（如滚动超出t1范围）会被正常隐藏，满足动画需求。

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