当另一个 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>

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

我想要的是，当我运行以下 jQuery 命令时：（ $('#geolocation').hide(); 或在 js 中：）document.getElementById('geolocation').style.display = 'none';按钮#recenter移动到底部（#geolocation块所在的位置）

怎么做 ？

Answer 1

不要绝对定位元素，利用弹性布局和对齐选项。div#content {&nbsp; position: relative;&nbsp; width: 80%;&nbsp; margin: 1em auto;&nbsp; border: 1px solid black;&nbsp; height: 300px;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: flex-end;&nbsp; align-items: flex-start;}div#menu {&nbsp; height: 50px;&nbsp; width: 80%;&nbsp; border: 1px solid black;&nbsp; text-align: center;&nbsp; margin: 0 auto;}div#recenter {&nbsp; line-height: 20px;&nbsp; text-align: center;&nbsp; border: 1px solid black;&nbsp; border-radius: 30px;&nbsp; margin: 10px;&nbsp; padding: 0px 10px;&nbsp; background-color: aliceblue;}div#geolocation {&nbsp; line-height: 20px;&nbsp; text-align: center;&nbsp; border: 1px solid black;&nbsp; margin: 10px;&nbsp; background-color: aliceblue;}<div id="content">&nbsp; <div id="recenter">Re-center</div>&nbsp; <div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>&nbsp; <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div></div>

Answer 2

当您单击地理位置并将其隐藏时，您还可以将居中按钮移至底部。这不是一个很好的方法，但它确实有效。div#content {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; border: 1px solid black;&nbsp; height: 500px;&nbsp; bottom: 0px;}div#menu {&nbsp; position: absolute;&nbsp; height: 125px;&nbsp; width: 100%;&nbsp; border: 1px solid black;&nbsp; bottom: 0px;&nbsp; line-height: 125px;&nbsp; text-align: center;}div#recenter {&nbsp; line-height: 50px;&nbsp; text-align: center;&nbsp; border: 1px solid black;&nbsp; border-radius: 30px;&nbsp; position: absolute;&nbsp; margin: 10px;&nbsp; padding: 0px 20px;&nbsp; bottom: 180px;&nbsp; background-color: aliceblue;}div#geolocation {&nbsp; line-height: 50px;&nbsp; text-align: center;&nbsp; border: 1px solid black;&nbsp; position: absolute;&nbsp; margin: 10px;&nbsp; bottom: 125px;&nbsp; background-color: aliceblue;}<div id="content">&nbsp; <div id="recenter">Re-center</div>&nbsp; <div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>&nbsp; <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div></div>

Answer 3

将地理位置和最近的 div 包装在一个 div 中，并给它们一个类。然后使用 calc 和 flex 来实现您的要求，如下所示。不需要使用positionCSS bottom，对于这种情况来说这是一个非常糟糕的做法。快乐的解决方案:)div#content{&nbsp; &nbsp;position:relative;&nbsp; &nbsp;width:100%;&nbsp; &nbsp;border:1px solid black;&nbsp; &nbsp;height:500px;&nbsp; &nbsp;bottom:0px;}div#menu{&nbsp; &nbsp;position:absolute;&nbsp; &nbsp;height:125px;&nbsp; &nbsp;width:100%;&nbsp; &nbsp;border:1px solid black;&nbsp; &nbsp;bottom:0px;&nbsp; &nbsp;line-height:125px;&nbsp; &nbsp;text-align:center;}&nbsp; #recenter{&nbsp; padding:10px;&nbsp; border:1px solid #000;&nbsp; max-width:120px;&nbsp; border-radius:30px;&nbsp; text-align:center;&nbsp; background-color: aliceblue;&nbsp; }#geolocation{&nbsp; &nbsp; line-height:50px;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; margin:10px;&nbsp; &nbsp; background-color: aliceblue;}.upper_div{&nbsp; &nbsp; height: calc(100% - 125px);&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; justify-content: flex-end;}<div id="content">&nbsp; <div class=upper_div>&nbsp; &nbsp; &nbsp; <div id="recenter">Re-center</div>&nbsp; <div id="geolocation">My address is : 3958&nbsp; Heron Way - Oregon 97351</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div></div>