动态定位与另一个元素相关的绝对元素答案

【问题标题】：dynamically positioning a absolute element related to another element动态定位与另一个元素相关的绝对元素
【发布时间】：2013-05-21 12:39:16
【问题描述】：

我有一个特殊的理由将我的标志放在横幅上，我的标志有postion:absolute，但是当我调整浏览器窗口的大小时，我遇到了对齐问题，到目前为止，我找到了一个使用 jQuery 的解决方案，如下所示：

$(document).ready(function(){ 
    alert($(document).height());
    var lopos = $('.banner1').children('img').height()/2;
    $('.logo').children('img').css('top', lopos);
});

横幅图像有max-width:100%，我使用jQuery 的height() 来获取它的高度并将其除以2，这样我就可以使用它来将我的徽标放在顶部。到目前为止我是成功的，但问题是它发生的及时，当我重新调整浏览器大小时，我没有看到值发生变化。

有没有办法让这段代码在窗口大小变化时起作用？

【问题讨论】：

避免使用警报。 console.log("blah") 几乎在所有情况下都更好：getfirebug.com/wiki/index.php/Console_API

标签： jquery html css layout

【解决方案1】：

试试这个

$(document).on('ready', function() {

    $(window).on('resize', function() {

         // Stuff in here happens on ready and resize.

    }).trigger('resize'); // Trigger resize handlers.       

});//ready

Source

【讨论】：

【解决方案2】：

我不确定我是否正确理解了您的问题，但我可以建议一个“免费的 JavaScript”解决方案。

如果你的 html 看起来像这样：

<div id='banner'>
    <img src='http://placehold.it/1500x300'/>
     <div id='logo'>logo</div>
</div>

然后您可以将您的徽标放置在横幅图像的顶部，如下所示：

#banner {
    position: absolute;
}
#banner img {
    max-width: 100%;
    display: block;
}
#logo {
    height: 50px;
    width: 50px;
    background: #cff;
    position: absolute;
    left: 20px;
    top: 50%; 
    z-index: 1;
    margin-top: -25px;
}

这是假设您的徽标具有您事先知道的固定大小，但我认为这是一个安全的假设......

“魔法”发生在 css 的最后两行。通过将顶部设置为 50%，它将使徽标的顶部与横幅的中心对齐。由于横幅与其包含的图像大小相同，这意味着徽标现在与横幅图像的中心对齐。现在在徽标上设置上边距，即其高度的负值，将其向上推 50%，从而使徽标的中心与横幅图像的中心对齐。

我希望这是有道理的。随意询问您是否需要任何进一步的解释，或者如果您希望我为您的用例更具体地发布一些 html/css。

我已经设置了一个小小提琴来演示：http://jsfiddle.net/pePSZ/

【讨论】：