在居中网页顶部切换侧边菜单
我有一个居中的网页(使用边距:0 auto;在“包装器 DIV”上),有一个很长的侧面菜单。 一个页面模板需要宽阔的内容区域,因此我尝试在顶部添加一个链接,该链接将切换显示侧面菜单(使用 jquery),因此如果单击它,它将显示在主页内容的顶部。
如果我使用“position:absolute;”我可以实现这一点在 #sidemenucontainer DIV 上,但如果我使用相对定位(因此它位于相对于居中布局的正确位置,即:不卡在浏览器的左上角),那么它将主页面内容向下推到菜单下方,而不是出现在页面“上方”。
如果需要,我可以准备一些示例代码,但我希望上述内容有意义。我确信我错过了一些明显的东西。 谢谢!
I have a centred web page (using margin: 0 auto; on a 'wrapper DIV') that has a long side-menu.
One page template needs a wide content area, so I am attempting to add a link at the top that will toggle showing the side menu (using jquery), so if clicked it will appear over the top of the main page content.
I can achieve this if I use 'position: absolute;' on the #sidemenucontainer DIV but if I use relative positioning (so it's in the correct place relative to the centred layout ie: not stuck in the top left corner of the browser), then it pushes the main page content down to underneath the menu, rather than appearing 'above' the page.
I can prepare some sample code if required, but I was hoping the above made sense. I'm sure I'm missing something obvious.
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
Absolute 表示相对于最近的相对定位父级 div 的绝对值。
通过为您的包装器指定一个
relative
的position
以及为您的侧边菜单指定一个absolute
的position
,您将定位包装器内的侧面菜单。您需要将侧边菜单绝对定位,以便可以将其移动到其他项目(在本例中为主要内容)的顶部。
这是一个示例: http://jsfiddle.net/RLcFf/
Absolute means absolute in relation to the nearest relatively positioned parent div.
By giving your wrapper a
position
ofrelative
and your side menu aposition
ofabsolute
you'll be positioning the side menu within the wrapper.You'll need the side menu positioned absolutely so that you can move it over the top of other items, in this case, the main content.
Here's a sample: http://jsfiddle.net/RLcFf/