CSS:无法将元素正确放置在粘性导航栏下方

宅男

我创建了一个带有足够文本的网站,以便您可以滚动(http://jsfiddle.net/o0emtyug/1/)。在右侧,我在网站上添加了一些用于特殊功能的按钮,这些按钮fixed使用CSS进行了定位并具有一定的间距top:XXpx;此外,我将按钮放在了菜单栏div容器中nav-primary

使用我的JQuery脚本sticky-nav.js,即使我向下滚动页面,菜单栏也始终在页面上可见。因此,如果我向下滚动页面,则菜单栏将停留在页面顶部。

我要实现的目标:

我希望我的按钮始终保持与菜单栏相同的距离高度。为此,我将需要删除CSS代码top:XXpx;如果执行此操作,我的按钮将消失。我尝试更改top为,margin-top但这并不能解决我的问题。

有人能告诉我在滚动条时将菜单按钮排列在菜单栏正下方的正确高度时,我需要做什么吗?

T30

我在导航栏中添加了一个绝对定位的测试按钮,因此它似乎不在容器中,但继承了它的位置:

#test {
  position: absolute;
  right: 0px;
  top: 100px;
}

小提琴在这里

请记住,绝对位置是相对于Body具有特定容器的第一个容器的相对位置position在这种情况下,top:100px相对于.nav-primary,具有position: relative

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章