Question

更新

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

上查看

有人可以告诉我为什么它不起作用？

Answer 1

替换

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

与

bottom: 0

它将位于其父母的底部。

同样left:0足以让div坐在左边，这就是你想要做的事情。

确保父母的位置具有绝对或相对位置。

Answer 2

父div是否具有相对或绝对的CSS位置？你需要那个。然后你可以使用

'bottom': '0px'

Answer 3

确保包含目标div的父div具有相对位置，并且目标div的位置绝对值为left：0和bottom：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>

Answer 4

嗯，我试着你所拥有的，它的确有效！

http://jsfiddle.net/8UCKm/1/

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

4 个答案: