隐藏另一个 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>

Currently, when I hide the #geolocation block in javascript, the #recenter button does not move.

What I want is that when I run the following jQuery command: $('#geolocation').hide(); (or in js : document.getElementById('geolocation').style.display = 'none'; ) the #recenter button moves to the bottom (where the #geolocation block was located)

How to do ?

Answer 1

Don't position elements the absolutely, take advantage of flexbox layout and alignment options.

 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

When you click the geolocation, and hide it, you can also move the recenter button to the bottom. It's not a very nice way to do this, but it works.

 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

wrap the geolocation and recenter div within a div and give it to them a class. then use calc and flex to achieve your requirement like below. don't need to use position and bottom CSS it's a very bad practice for this kind of situation. Happy Solution :)

 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>