当前位置: 动力学知识库 > 问答 > 编程问答 >

css - How to "tie" one HTML element's position to another HTML element's position?

问题描述:

I've run into quite complicated HTML problem. I'm making a website and when users click menu, the menu popup slides out.

The problem that I'm having is how do I make sure that popup slider is always below the menu link.

As I resize page the menu link moves around and it's position is not predefined.

It could be at {x;y}={1000; 200} but if I resize the page smaller, it can move to {x,y}={400; 300}.

I tried setting position to absolute for menu and positioning it at 1000, 250 (below link), but it doesn't work if I resize the page smaller as the link is now at 400; 300 and not at 1000; 200...

Therefore my question - how do I "tie" the menu slider to menu link, so that no matter where the menu link is, it was always below it?

I'd like to do this in pure CSS and HTML with no JavaScript function calls.

网友答案:

Easiest way to do that is to make it like this:

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

And then

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

Like that, the menu items are positioned absolutely but relative to the wrapper.

网友答案:

If you are using jQuery, try the following:

$(window).resize(function(){
    repositionPopupSlider();
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: