Обложка HTML Navbar в CSS

Question

У меня есть несколько HTML-элементов, которые создают диалоговое окно, которое показывает загрузчик загрузки. Он также имеет полупрозрачный фон, который заполняет страницу. Он заполняет всю страницу, кроме навигационной панели. Как я могу скрыть навигационную панель также в CSS? Example

Вот мой CSS для фона:

.dialog { 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    padding: 0; 
    margin: 0; 
    font: inherit; 
    color: inherit; 
    background: transparent; 
    border: none; 
    line-height: normal; 
    cursor: default; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-weight: 400; 
    font-size: 17px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    margin: auto auto; 
    background-color: rgba(255, 255, 255, 0.92); 
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.07); 
    box-shadow: 0 2px 12px rgba(0,0,0,0.07); 
    overflow: hidden; 
    min-width: 270px; 
    min-height: 100px; 
    text-align: left; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    z-index: 999; 
} 

#loadingDialog { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    white-space: nowrap; 
    overflow: hidden; 
    word-spacing: 0; 
    padding: 0; 
    margin: 0; 
    font: inherit; 
    color: inherit; 
    background: transparent; 
    border: none; 
    line-height: normal; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-weight: 400; 
    font-size: 17px; 
    overflow: hidden; 
    background-color: rgba(0, 0, 0, 0.7); 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    z-index:999; 
} 

и corrisponding HTML:

<div id="loadingDialog" ng-class="loadClass"> 
     <div class="dialog"> 
      <div class="page"> 
      <p style="text-align:center;margin-top:40px;opacity:0.6;"><i class="fa fa-spinner fa-spin fa-lg"></i> Loading...</p> 
      </div> 
     </div> 
    </div> 

NavBar CSS:

.navigation-bar { 
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-weight: 400; 
    font-size: 17px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    white-space: nowrap; 
    overflow: hidden; 
    word-spacing: 0; 
    padding: 0; 
    margin: 0; 
    font: inherit; 
    color: inherit; 
    background: transparent; 
    border: none; 
    line-height: normal; 
    cursor: default; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    z-index: 2; 
    display: block; 
    height: 44px; 
    padding-left: 0; 
    padding-right: 0; 
    background: #fff; 
    color: #333; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    border-bottom: 1px solid #ddd; 
    font-weight: 400; 
    width: 100%; 
    white-space: nowrap; 
    overflow: visible; 
} 

Answer 1

Чтобы сделать DIV, который остается прежде всего другие вы можете использовать следующий код:

body {position: relative;} 

.infront { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 999; 
} 

Как CSS и нижеприведенный код после открытия <body>: в тег

<div class="infront"><!-- your content --></div> 

Мое предположение, что ваш навигационный бар остается белым, потому что у вас есть вложенные в коробку верхи загрузки каким-то образом в вашем области содержимого или позиционировал вашу навигационную панель с position: absolute, что заставляет ее оставаться перед другими div. Чтобы этого избежать, я добавил z-index: 999;, который создает вид глубины резкости и позволяет div с более высоким z-индексом оставаться выше остальных.

Если вам нужна более точная помощь, всегда полезно публиковать фрагменты кода, которые вы используете! За дополнительной информацией не стесняйтесь спрашивать.

С уважением, Мариан.

Answer 2

Я считаю, что вы должны использовать z-index большую ценность для диалога, а затем для Navbar.

Пример если Navbar имеющий:

z-index:1 

затем использовать для диалога

z-index:2 

Вы должны включить Html разметку и CSS в вашем вопросе для лучшего понимания.