找到HTML元素的底部位置，並把內部元件在父

更新找到HTML元素的底部位置，並把內部元件在父

我試圖把HTML div標籤在其父div標籤底部的底部。例如，我有div標籤並使用jquery我正在創建另一個div標籤，並試圖將其放在文檔中已經可見的div標籤的底部。我正在嘗試下面的代碼，但不工作。它不會將div標籤放在可用div標籤的底部。

var self = $(this); 
     var sh = $('<div></div>'); 
     var bgshadow = $(sh).css({ 
      'position'    : 'absolute', 
       'width'     : self.outerWidth(), 
       'height'    : 30, //self.outerHeight() - 180, 
       'left'     : self.offset().left, 
       'top'     : self.height() - sh.height(), //self.offset().top, 
       //'bottom'    : self.height() - sh.height(),      
       '-webkit-box-shadow' : '0px 15px 20px #000000', 
       '-moz-box-shadow'  : '0px 15px 20px #000000', 
       'box-shadow'   : '0px 15px 20px #000000', 
       'border-radius'   : '25px', 
       'z-index'    : 1 
     }).appendTo(self.parent());

編輯

請檢查它jsfiddle

有人能告訴我，爲什麼它不工作？

來源

2012-03-08 2619

您想將div標記從任何位置移動到最後位置？ – sandeep 2012-03-08 10:42:07

與

bottom: 0

它會坐在其父的底部取代

'top' : self.height() - sh.height(), //self.offset().top

。

另外left:0足以讓div坐在左邊，這是你似乎試圖做的。

只要確保家長定位絕對或相對定位。

來源

2012-03-08 10:43:00 SpliFF

只有父母也是抵消父母。提示：在父級上設置'position：relative;'。 – 2012-03-08 10:45:46

對不起。它不會放在其父div標籤內。所以它的父母是文件。您的解決方案將其放在整個文檔的底部。 – 2619 2012-03-08 10:46:28

@alOne：你在說什麼？它的新父母是它附加的元素，你從哪裏獲得文檔？編輯：哦，對，你假設父母是文件可能是因爲你沒有定位父母，對嗎？ – SpliFF 2012-03-08 10:52:54

確保包含目標div的父div具有相對位置，目標div具有絕對位置，左邊爲0，底部爲0. 不使用內聯樣式，而是使用CSS類。你的DOM結構應該是這樣的。

<html> 
    <head> 
    <style> 
     .border {border:1px solid #000;} 
     .parent{height:300px;position:relative;} 
     .target{height:100px;width:300px;position:absolute;bottom:0;} 
    </style> 
    </head> 
    <body> 
    <div class="parent border"> 
     parent 
     <div class="target border"> 
     target 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-03-08 10:46:04 ch4nd4n

父div是否具有相對或絕對的CSS位置？你需要那個。然後你可以只使用