2017-01-15 51 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