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

  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>

Answer 2

当您单击地理位置并将其隐藏时，您还可以将居中按钮移至底部。这不是一个很好的方法，但它确实有效。

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';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div>

</div>

Answer 3

将地理位置和最近的 div 包装在一个 div 中，并给它们一个类。然后使用 calc 和 flex 来实现您的要求，如下所示。不需要使用positionCSS bottom，对于这种情况来说这是一个非常糟糕的做法。快乐的解决方案:)

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;

}

  #recenter{

  padding:10px;

  border:1px solid #000;

  max-width:120px;

  border-radius:30px;

  text-align:center;

  background-color: aliceblue;

  }

#geolocation{

    line-height:50px;

    text-align:center;

    border: 1px solid black;

    margin:10px;

    background-color: aliceblue;

}

.upper_div{

    height: calc(100% - 125px);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}

<div id="content">

  <div class=upper_div>

      <div id="recenter">Re-center</div>

  <div id="geolocation">My address is : 3958  Heron Way - Oregon 97351</div>

    </div>

    <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div>

</div>