javascript - 当另一个 div 隐藏时移动一个 div

Question

div#content {
  position: relative;
  width: 100%;
  border: 1px solid black;
  height: 500px;
  bottom: 0px;
}

div#menu {
  position: absolute;
  height: 125px;
  width: 100%;
  border: 1px solid black;
  bottom: 0px;
  line-height: 125px;
  text-align: center;
}

div#recenter {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  border-radius: 30px;
  position: absolute;
  margin: 10px;
  padding: 0px 20px;
  bottom: 180px;
  background-color: aliceblue;
}

div#geolocation {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  position: absolute;
  margin: 10px;
  bottom: 125px;
  background-color: aliceblue;
}

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

目前，当我在 JavaScript 中隐藏 #geolocation block 时，#recenter 按钮不会移动。

我想要的是当我运行以下 jQuery 命令时:$('#geolocation').hide();(或者在js中:document.getElementById('geolocation').style.display = 'none';)#recenter 按钮移至底部(#geolocation block 所在的位置)

怎么办？

Answer 1

不要绝对定位元素，利用 flex 布局和对齐选项。

div#content {
  position: relative;
  width: 80%;
  margin: 1em auto;
  border: 1px solid black;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

div#menu {
  height: 50px;
  width: 80%;
  border: 1px solid black;
  text-align: center;
  margin: 0 auto;
}

div#recenter {
  line-height: 20px;
  text-align: center;
  border: 1px solid black;
  border-radius: 30px;
  margin: 10px;
  padding: 0px 10px;
  background-color: aliceblue;
}

div#geolocation {
  line-height: 20px;
  text-align: center;
  border: 1px solid black;
  margin: 10px;
  background-color: aliceblue;
}

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