Javascript 查找html元素的底部位置并将内部元素放在父元素的底部_Javascript_Jquery_Html_Css

Javascript 查找html元素的底部位置并将内部元素放在父元素的底部

javascript jquery html css

Javascript 查找html元素的底部位置并将内部元素放在父元素的底部,javascript,jquery,html,css,Javascript,Jquery,Html,Css,已更新我试图将html div标记放在其父div标记的底部。例如，我有一个div标记，我正在使用jquery创建另一个div标记，并尝试将其放在文档中已经可见的div标记的底部。我正在尝试下面的代码，但不工作。它不会将div标记放在可用div标记的底部 var self = $(this); var sh = $('<div></div>'); var bgshadow = $(sh).css({ 'positio

已更新

我试图将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());

var self=$（这是）；
var sh=$（''）；
var bgshadow=$（sh）.css({
'位置'：'绝对'，
“宽度”：self.outerWidth（），
“高度”：30，//self.outerHeight（）-180，
“left”：self.offset（）.left，
“top”：self.height（）-sh.height（），//self.offset（）.top，
//“底部”：self.height（）-sh.height（），
“-webkit盒阴影”：“0px 15px 20px 000000”，
“-moz盒阴影”：“0px 15px 20px 000000”，
“盒子阴影”：“0px 15px 20px 000000”，
“边界半径”：“25px”，
“z索引”：1
}).appendTo（self.parent（））；

已编辑

请检查一下

有人能告诉我为什么不工作吗？

更换

'top'：self.height（）-sh.height（），//self.offset（）.top

与

底部：0

它将位于其父对象的底部

另外

left:0

足以让div坐在左边，这就是您似乎要做的

只需确保父级以绝对或相对定位。

确保包含目标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>


.border{border:1px solid#000；}
.parent{高度：300px；位置：相对；}
.target{高度：100px；宽度：300px；位置：绝对；底部：0；}
父母亲
目标

父div的CSS位置是相对还是绝对？你会需要的。然后你就可以使用

'bottom': '0px'

嗯，我尝试了你所拥有的一切，而且效果很好

要将div标记从任何位置移动到最后一个位置吗？仅当父项也是偏移父项时。提示：设置

位置：相对在父项上。抱歉。它将不会放置在其父div标记内。所以它的父对象是文档。您的解决方案将其放在整个文档的底部。@孤独者：您在说什么？它的新父元素是它附加到的元素，您从何处获取文档？编辑：哦，对了，你假设父对象是文档，可能是因为你没有定位父对象，对吧？