在 CSS 中覆盖 HTML 导航栏
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,以及以下 html 代码在开头<body>
-tag 之后:
<div class="infront"><!-- your content --></div>
我的猜测是,您的导航栏保持白色,因为您以某种方式将覆盖加载框嵌套在内容区域中,或者将导航栏与position: absolute
一起定位,使其保持在其他div的前面。为了避免这种情况,我添加了z-index: 999;
,它创造了一种景深,并让具有较高 z 指数的div 保持高于其他div。
如果您需要更精确的帮助,发布您正在使用的代码片段总是有帮助的!欲了解更多信息,请随时询问。
此致敬意玛丽安。
我相信你应该为对话使用z-index
而不是导航栏更大的价值。
例如,如果导航栏具有:
z-index:1
然后用于对话
z-index:2
您应该在问题中包含 Html 标记和 css,以便更好地理解。
相关文章:
- (html/css/javascript)试图使导航栏中的“当前页面”链接变成不同的颜色
- 使用选项卡导航到不同的html文件(html、JavaScript)
- 如何在HTML中制作带导航的表格
- 移动导航菜单不起作用(HTML,CSS和JQuery)
- 如何在不包含导航选项卡内容、页脚和头部的情况下打印 HTML/PHP 页面
- 如何禁止html表单在提交时导航
- HTML导航在屏幕底部,并粘贴到顶部
- 如何让我的导航栏位于每个HTML页面的顶部(避免复制相同的代码)
- Windows phone 8和phonegap 2.7.0,HTML页面和Xaml之间的导航以及返回
- 需要jquery&litte-html-css改进猫头鹰幻灯片与选项卡导航(分页)
- 动态html页面导航
- androidphonegap-在单个html页面中导航功能或事件时实现后退按钮
- 复杂的 HTML 导航菜单
- 当 html 高度为 100% 时,粘性导航中断
- 导航到新的 html 页面并更改该新页面上的 img src
- Html
标记导航
- 使用 HTML 和 jQuery 创建相同类型的导航
- 导航到 JavaScript 中的 HTML 页面
- IE8 问题 - jQuery 调整页面大小时导航 html
- 标签导航HTML