重点是我的标题应该有一个盒子阴影。但是,即使在标头组件 box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) 中定义了它,它也不会显示。如果降低标题的高度,您将看到框阴影。标题高度应为 70 像素(包括框阴影)。我究竟做错了什么?
Stackblitz 链接:https://stackblitz.com/edit/stackblitz-starters-rhsyz2? file=src%2Fmain.ts
最相关的代码:
// styles.scss
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
//app.component.html
<div class="grid-box">
<div class="nav"></div>
<app-header class="header"></app-header>
<div class="content"></div>
</div>
//app.component.scss
.grid-box {
display: grid;
width: 100%;
height: 100%;
grid-template-areas: "nav header" "nav content";
grid-template-columns: 100px auto;
grid-template-rows: 70px auto;
}
.nav {
grid-area: nav;
background-color: blue;
}
.header {
grid-area: header;
background-color: #777;
}
.content {
grid-area: content;
background-color: red;
}
// header.component.html
<div>header</div>
// header.component.scss
div {
background-color: #fff;
height: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
我们可以将盒子阴影添加到
host component
并使用z-index
以确保阴影位于其他元素之上!斯塔克闪电战
如果你不想改变CSS,你可以保留最后一个元素作为标题,这样它就会显示在所有其他元素之上!
Stackblitz 演示
在 main.ts 中,更改此行:
对此:
在 HTML 中,如果有两个元素重叠,并且其中一个元素不是另一个元素的子元素,则后一个元素将获得优先级。z 索引较大的重叠元素会覆盖 z 索引较小的元素。默认 z 索引为 0。