動態定位與另一元素

我有一個特別的理由來定位的橫幅我的標誌一個絕對的元素，我的標誌有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，這樣我可以用它來定位在上面我的標誌。我SUCESSFUL到目前爲止，但問題是，它發生只是時間，當我rezize我的瀏覽器我沒有看到值的變化。

有沒有一種辦法可以讓窗口大小改變此代碼的工作？

來源

2013-05-21 Max Ahmed

避免使用警報。的console.log（「嗒嗒」）是在幾乎所有情況下更好：http://getfirebug.com/wiki/index.php/Console_API – Incognito

我不知道我理解正確，你的問題，但是我可以提出一個「免費的JavaScript的解決方案。

前提是你的HTML看起來像這樣：

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

然後，您可以定位你的標誌的旗幟IMG的頂部是這樣的：

#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/

來源

2013-05-21 21:41:55 Pevara

試試這個

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

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

     // Stuff in here happens on ready and resize. 

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

});//ready

Source

來源

2013-05-21 12:46:56

動態定位與另一元素

回答

相關問題