为什么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
答案 0 :(得分:1)
您应在.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>