相对于另一个元素的位置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

回答

相关问题