如何將元素放在絕對位置的元素下？

Question

這是我的代碼：

 .absolute_postion{ position: absolute; border: 1px solid red; height: 30px; width: 100%; clear: both; } .other_elements{ border: 1px solid green; height: 30px; width: 100%; } 

 <div class="wrapper"> <div class="absolute_postion">foo</div> <div class="other_elements">bar</div> </div> 

如您所見， div.other_elements在div.absolute_postion下。 如何將其放在div.absolute_postion的底部？

Answer 1

將top:0賦予.absolute_postion類，並將margin-top:30px賦予.other_elements 。

 .absolute_postion{ position: absolute; border: 1px solid red; height: 30px; width: 100%; clear: both; top:0; } .other_elements{ border: 1px solid green; height: 30px; width: 100%; margin-top:30px; } 

 <div class="wrapper"> <div class="absolute_postion">foo</div> <div class="other_elements">bar</div> </div> 

Answer 2

我看到.absolute_postion元素的高度是動態的，因此可以使用jquery來實現。
您可以使用height()方法獲取div的像素，並使用該值應用margin-top：

 var val = $('.absolute_postion').height() $('.other_elements').css('margin-top', val); console.log(val) 

 .absolute_postion{ position: absolute; border: 1px solid red; height: 30px; width: 100%; clear: both; top:0; } .other_elements{ border: 1px solid green; height: 30px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="absolute_postion">foo</div> <div class="other_elements">bar</div> </div> 

注意：請記住將top:0添加到absolute_postion div中。

Answer 3

只需添加上邊距等於高度absolute_position DIV

 .absolute_postion { position: absolute; border: 1px solid red; height: 30px; width: 100%; clear: both; top: 0; } .other_elements { border: 1px solid green; height: 30px; width: 100%; margin-top: 32px; } 

 <div class="wrapper"> <div class="absolute_postion">foo</div> <div class="other_elements">bar</div> </div>