相對於另一個元素的位置div

我想用另一個元素來定位div，但是當頁面垂直滾動時使它保持原位。父元素比屏幕高度長。這可以用CSS來完成，還是需要使用jQuery（這就是我通常使用的）？我會用固定的位置，但我不知道如何將它相對於父DIV關聯...相對於另一個元素的位置div

<div id="veryHighDiv"> 
    <div id="positionMe"></div> 
</div>

所以，我需要它是相對於水平位置的長期父位置，但「定「當涉及到垂直滾動。

來源

2012-06-19 santa

位置格絕對於母公司的項目，調整它在滾動事件 –

所以「頂」，這是CSS和jQuery的組合解決方案？ – santa

'position：fixed'應該是相對於瀏覽器窗口，而不是任何父元素。 – Blazemonger

很簡單的使用jQuery - http://jsfiddle.net/zA3mq/

$(window).scroll(function() { 
    $("#positionMe").css('position', 'fixed'); 
});

來源

2012-06-19 19:50:53

太棒了！太棒了。 – santa

由於您最終希望它是固定位置，因此無需將其作爲相對位置啓動，因爲將其更改爲動態修復會破壞您在相對位置（或通常絕對位置）內執行的任何CSS工作。

如果是我，我會寫一個函數來計算固定元素應該在哪裏，然後一定要在所有窗口事件上調用它，例如加載和調整大小，以便它保持原位。下面是一個示例，但您可能需要根據您的CSS的其餘部分更改：

<script> 

$(window).load(function() { 
    positionElem(); 
}); 
$(window).resize(function() { 
    positionElem(); 
}); 

function positionElem() { 
    var padFromDiv = 30; // amount of padding you want from your div 
    var newX = 0; // initialize newX at 0 

    // get difference in window and veryHighDiv if window is larger 
    if ($(window).width() > $('#veryHighDiv').width()) { 
     newX = ($(window).width()-$('#veryHighDiv').width()); 
    } 

    newX+=padFromDiv; 

    $('#positionMe').css('left',newX); 
} 

</script>

來源

2012-06-19 19:43:50 iDsteven

是的，我傾向於這樣的事情。其實我正要跟隨@Mohammad Ali Akbar的建議，並最初將div與父母相對定位，然後調整最高值，但我認爲你的解決方案使它更簡單。事實上，我可能會得到一個X座標關閉這個父div中的任何其他元素，並解析到新的div，同時保持底部或頂部值固定。 – santa

Exactomondo。 @Zoltan Roth給出了一些很好的東西，如果你只需要切換到固定的，但從我的角度來看，這個元素應該已經在你的CSS中被修復了，並且這個方法對你沒有任何作用，使它看起來相對於verHighDiv元素。 – iDsteven

如果將一個絕對的風格div來相對DIV我相信，它會留卡到哪裏相對div是。

<div id="veryHighDiv"> 
     <div id="positionmMe"> </div> 
    </div> 

#veryHighDiv { 
    position: relative; 
} 

#positionMe { 
    position: absolute; 
    top: 50px; 
    left: 100px; 
}

來源

2012-06-19 19:46:19 Gonzy

相對於另一個元素的位置div

回答

相關問題