在CSS中介绍HTML导航栏

Question

I have a couple of HTML elements that create a Dialogue Box that show a loading spinner. 我有几个HTML元素，它们创建一个显示加载微调框的对话框。 It also has a semi-opaque background that fills the page. 它还具有填充页面的半透明背景。 It fills up the whole page except the navbar. 它会填充除导航栏以外的整个页面。 How could I cover up the navbar as well in CSS? 如何在CSS中也隐藏导航栏？ Example 例

Here is my CSS for the background: 这是我的背景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;
}

and the corrisponding HTML: 和相应的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: 导航栏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

To make a div that stays above all the others you can use the following code: 要使div高于其他所有div，可以使用以下代码：

body {position: relative;}

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

As css, and the following html code after the opening <body> -tag: 作为css，并在<body> -tag之后打开以下html代码：

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

My guess is, that your nav bar stays white, because you have nested the overlaying loading box somehow in your content area, or positioned your nav bar with position: absolute which makes it stay in front of the other divs. 我的猜测是，导航栏保持白色，这是因为您已在内容区域中以某种方式嵌套了叠加的加载框，或者将导航栏的position: absolute ，使其保持在其他div的前面。 To avoid this I have added z-index: 999; 为了避免这种情况，我添加了z-index: 999; which creates kind of a depth of field and lets the div with the higher z-index stay above the others. 这会产生某种景深，并使具有较高z-index的div保持在其他景深之上。

If you need more precise help it's always helpful to post the code snippets you are using as well! 如果您需要更精确的帮助，发布您正在使用的代码段总是很有帮助的！ For further information feel free to ask. 有关更多信息，请随时询问。

Best regards, Marian. 最好的问候，玛丽安。

Answer 2

I believe you should use z-index greater value for Dialogue then Navbar. 我相信您应该为“对话”使用比导航栏更大的z-index值。

Example if navbar having: 如果navbar具有以下示例：

z-index:1

then use for dialogue 然后用于对话

z-index:2

You should include Html markup and css in your question for better understanding. 您应该在问题中包含HTML标记和CSS，以更好地理解。

在CSS中介绍HTML导航栏

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-13 16:46:04

解决方案2
1 2014-12-13 16:51:00

在CSS中介绍HTML导航栏

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-13 16:46:04

解决方案2 1 2014-12-13 16:51:00

解决方案1
1 已采纳 2014-12-13 16:46:04

解决方案2
1 2014-12-13 16:51:00