html - 为什么 z-index 被忽略?
问题描述
为什么 z-index 被忽略?我希望红色背景的 div 覆盖整个窗口。
.nav-bar {
background: #673ab7;
height: 4rem;
width: 100%;
position: relative;
z-index: -100;
}
.nav-bar div {
display: inline-block;
top: 1em;
position: absolute;
}
.nav-bar__section {
display: inline-block;
color: rgb(255, 255, 255, 0.87);
font-size: 1.4rem;
position: absolute;
left: 2.5rem;
}
.title-bar {
height: 5rem;
width: 100%;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 90px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 200;
}
.side-bar {
position: fixed;
height: 100%;
width: 30%;
background-color: red;
z-index: 3;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="nav-bar">
<div class="nav-bar__section">
Book Collection
</div>
</div>
<div class="side-bar">
</div>
<div class="title-bar">
My Collection
</div>
</body>
</html>
生成的 HTML
解决方案
您应该在 上定义顶部位置.side-bar
:
.nav-bar {
background: #673ab7;
height: 4rem;
width: 100%;
position: relative;
z-index: -100;
}
.nav-bar div {
display: inline-block;
top: 1em;
position: absolute;
}
.nav-bar__section {
display: inline-block;
color: rgb(255, 255, 255, 0.87);
font-size: 1.4rem;
position: absolute;
left: 2.5rem;
}
.title-bar {
height: 5rem;
width: 100%;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 90px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 200;
}
.side-bar {
position: fixed;
height: 100%;
width: 30%;
background-color: red;
z-index: 3;
top: 0;
}
<div class="nav-bar">
<div class="nav-bar__section">
Book Collection
</div>
</div>
<div class="side-bar">
</div>
<div class="title-bar">
My Collection
</div>
推荐阅读
- kendo-ui - 带有布尔值的剑道网格过滤器模式行
- javascript - 如何在javascript中调用python dir值
- mysql - 如果 id 不为空,Mysql 计数
- javascript - 如何将数组php转换为javascript数组
- python - 如何从 8 位中取出第 3 位
- php - PHP Post Form,无法上传超过 25MB 的文件
- deployment - 启动wildfly后如何通过脚本依次部署WAR?
- javascript - WeakMap 和 JavaScript ES6 中类的私有成员有什么区别吗?
- javascript - 如何使用 Jest 和 Enzyme 测试样式组件以具有属性
- javascript - 3 个字符后的 Javascript 预输入