找到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位置？你需要那个。然后你可以只使用