2017-01-15 52 views
0

我正在使用Bootstrap v3.3.7与撇号CMS。我的导航栏使用navbar-fixed-top风格,具有以下CSS在引导程序固定导航栏下方的浮动窗口小部件

.navbar-fixed-top { 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    top: 0; 
    border-width: 0 0 1px; 
} 

我怎样才能让所有的撇号管理部件的固定导航栏始终显示我上面的固定导航栏?有没有办法可以增加全局z-index或某些css重写?它看起来像这样

enter image description here

这显然是丑陋和侵入。

+0

是小工具的HTML + CSS由CMS本身建立和插入的z-index ?它只是看起来有绝对的定位,并且由于你的导航栏是固定的,它不会受到控件元素的影响。无论如何,如果控件元素具有固定的高度,只需从[top](http://www.w3schools.com/cssref/pr_pos_top.asp)偏移导航栏即可。 – Cooleronie

+0

是的,小部件由CMS插入,作为用于操作活动页面的一种菜单系统。但是,我不明白你的意思是“从顶部偏移导航栏”,因为导航栏固定在'top:0'处。我想知道是否有一些CSS可以重写,或者可能是一个JavaScript钩子,我可以使用它来知道这些小部件何时出现。 – Carson

+0

是的,用CSS重写引导在这里很好。在Bootstrap之后加载你的自定义css,并在你自己的CSS中添加'.navbar {top:$ px}',其中'$'是widget的高度。对于完整的解决方案,如果widget在DOM中呈现,则创建一个js侦听器,用于更改“navbar”的css“top”属性。 – Cooleronie

回答

1

我改变了我的导航栏的z-index是因为apos-modal-blackoutz-index: 300;(这是黑暗的画面来表示一个模式配置窗口打开)有z-index: 350;我不知道这是否会在任何负面的副作用尽管如此,该网站的其余部分。

你也可以写一个js脚本来监控apos-modal-blackout类,如果它存在,改变他们的导航栏小于350