[英]Cover HTML Navbar in CSS
我有幾個HTML元素,它們創建一個顯示加載微調框的對話框。 它還具有填充頁面的半透明背景。 它會填充除導航欄以外的整個頁面。 如何在CSS中也隱藏導航欄? 例
這是我的背景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;
}
和相應的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>
導航欄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;
}
要使div高於其他所有div,可以使用以下代碼:
body {position: relative;}
.infront {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
作為css,並在<body>
-tag之后打開以下html代碼:
<div class="infront"><!-- your content --></div>
我的猜測是,導航欄保持白色,這是因為您已在內容區域中以某種方式嵌套了疊加的加載框,或者將導航欄的position: absolute
,使其保持在其他div的前面。 為了避免這種情況,我添加了z-index: 999;
這會產生某種景深,並使具有較高z-index的div保持在其他景深之上。
如果您需要更精確的幫助,發布您正在使用的代碼段總是很有幫助的! 有關更多信息,請隨時詢問。
最好的問候,瑪麗安。
我相信您應該為“對話”使用比導航欄更大的z-index
值。
如果navbar具有以下示例:
z-index:1
然后用於對話
z-index:2
您應該在問題中包含HTML標記和CSS,以更好地理解。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.