如何将一个HTML元素的位置“绑定”到另一个HTML元素的位置？

Question

我遇到了相当复杂的HTML问题。我正在创建一个网站，当用户点击菜单时，菜单弹出窗口会滑出。

我遇到的问题是如何确保弹出式滑块始终位于菜单链接下方。

当我调整页面大小时，菜单链接会四处移动，而且它的位置不是预定义的。

可能是{x; y} = {1000;但是如果我将页面调整得更小，它可以移动到{x，y} = {400; 300}

我尝试将position设置为absolute以获取菜单，并将其定位在1000, 250（链接下方），但如果我将链接调整为较小的页面则不起作用在400; 300而不是1000; 200 ...

因此我的问题 - 如何将菜单滑块“绑定”到菜单链接，这样无论菜单链接在哪里，它总是在它下面？

我想在没有JavaScript函数调用的纯CSS和HTML中执行此操作。

Answer 1

最简单的方法就是这样：

<div id="wrapper">
  <div id="menuOpener>Menu</div>
  <div id="menuItems">Items</div>
</div>

然后

#wrapper { position: relative; } 
#menuItems { position: absolute; top: 0; left: 0; } 

就像这样，菜单项绝对定位，但相对于包装器。

Answer 2

如果您使用的是jQuery，请尝试以下操作：

$(window).resize(function(){
    repositionPopupSlider();
});