隐藏#geolocation后，如何让#recenter div自动移至其原位置？

嘿，这个问题我太熟了！你现在遇到的情况，根源在于你给#recenter和#geolocation都用了绝对定位（position: absolute）——这种定位会让元素彻底脱离正常的文档流，彼此之间完全没有布局关联。所以哪怕你把#geolocation隐藏了，#recenter根本感知不到它的消失，自然不会移动位置。

下面给你两种解决方案，优先推荐第一种更优雅的流式布局方案：

方案一：用Flexbox重构布局（推荐） #

Flexbox是CSS3的布局神器，能轻松实现动态布局调整，当某个元素隐藏时，其他元素会自动填补位置。具体修改如下：

修改后的CSS代码 #

div#content {
  position: relative;
  width: 100%;
  border: 1px solid black;
  height: 500px;
  /* 转为flex容器，垂直方向排列 */
  display: flex;
  flex-direction: column;
  /* 让所有元素靠容器底部对齐 */
  justify-content: flex-end;
  /* 元素之间的间距，替代原来的margin */
  gap: 10px;
  padding: 10px;
  box-sizing: border-box; /* 确保padding不会撑大容器宽度 */
}

div#menu {
  height: 125px;
  border: 1px solid black;
  line-height: 125px;
  text-align: center;
  cursor: pointer; /* 给个鼠标指针提示，提升交互体验 */
}

div#recenter {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  border-radius: 30px;
  padding: 0 20px;
  background-color: aliceblue;
  width: fit-content; /* 让宽度适配内容 */
  align-self: flex-start; /* 靠左对齐，和原来的margin效果一致 */
}

div#geolocation {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  background-color: aliceblue;
  width: fit-content;
  align-self: flex-start;
}

修改后的HTML代码 #

<div id="content">
  <div id="recenter">Re-center</div>
  <div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
  <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>

效果说明

现在点击MENU按钮隐藏#geolocation后，#recenter会自动向下移动到原来#geolocation的位置——因为Flexbox容器会自动重新计算布局，把剩余元素重新排列，完全不需要额外的JS逻辑。

方案二：用JavaScript动态调整绝对定位（不推荐） #

如果你因为某些限制必须保留绝对定位，那只能通过JS手动修改#recenter的位置。比如：

document.getElementById('menu').onclick = function() {
  const geoEl = document.getElementById('geolocation');
  const recenterEl = document.getElementById('recenter');
  
  geoEl.style.display = 'none';
  // 把recenter的bottom值改成原来geolocation的bottom值
  recenterEl.style.bottom = '125px';
}

不过这种方法很死板，如果后续元素高度、间距有变化，你得手动修改数值，维护成本很高，所以还是优先选Flexbox方案。

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