标题不以红色显示

Question

我想在HTML/CSS:中获得这种类型的结果

示例

标题是红色的，但我不会在下面的结果中显示它。。。

我的结果

请问我怎样才能把颜色显示成红色？我想我错过了一步？

如果你想在CSS/HTML 中复制，这里有一个复制品

非常感谢你对我的问题的帮助。

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #2af598;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
h1 {
color: #fff;
font-size: 2.5rem;
text-align: center;
padding: 50px 0;
}

/* MENU - SIDEBAR */

/* C'est le fond bleu vertical */
.sidebar {
width: 20%;
background-color: #fff;
/*#239cd3;*/
height: 781px;
}

/* C'est le logo */
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
border-bottom: 1px solid black;
}

/* Centraliser les rubriques */
.sidebar .menu {
position: relative;
padding: 15px 15px 15px 45px;
color: #4d4d4d;
font-weight: bold;
border-bottom: 1px solid #ccc;
cursor: pointer;
transition: all 0.4s ease;
}

/* Ajustage icones  */
.sidebar li i {
position: absolute;
top: 1.2rem;
left: 1rem;
color: #595959;
transition: all 0.4s ease;
}

/* Placer les flèches à droite */
.sidebar li i.fa-chevron-down {
right: 1rem;
left: auto;
}

/* Pivoter en haut / en bas la flèche */
.sidebar li.active i.fa-chevron-down {
transform: rotate(180deg);
}

/* Changement de couleur de la rubrique après clique */
.sidebar li.active .menu {
color: #b63b4d;
}

/* Changement de couleur icones après clique */
.sidebar li.active i {
color: #b63b4d;
}

/* Adaptation fond pour le sous menu */
.submenu {
height: 0;
overflow: hidden;
background: #fff;
/* #239cd3;*/
font-size: 14px;
transition: height 0.4s ease;
}

/* Ligne de séparateur sur chaque submenu */
.submenu li {
border-bottom: 1px solid #4b4a5e;
}

/* Sous-menu après cliquage */
.submenu a {
display: block;
text-decoration: none;
color: blue;
padding: 12px;
padding-left: 42px;
transition: all 0.25s ease-in-out;
}

/* Survole submenu en couleur */
.submenu a:hover {
background: #b63b4d;
color: #fff;
}

/* Header */
.header {
position: relative;
height: 100px;
background-color: red;
margin: 0 0 0 300px;
}

<div class="sidebar">
<div class="logo-details"> </div>
<ul>
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }">
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
</ng-container>
</li>
</ul>
</div>
<div class="header">
<div>text</div>
</div>

Answer 1

在你的头类中试试这个：

.header {
position: absolute;
top: 0;
}

对于top: 0，您将div带到顶部，对于position: absolute，您将强制采取top: 0位置

Answer 2

您的问题不是背景没有显示为红色(在stackblitz代码中是红色(，而是您实际上没有任何类型的包装器div来为侧边栏/页眉div提供任何定位上下文。如果您有一个包装器父div并将其设置为flex，那么您的头可能应该相应地定位自己。

Answer 3

您似乎已经为HTML文件的所有正文设置了背景色，而不是将其应用于包含您想要的红色或绿色部分的div。

Answer 4

我现在能想到几个解决方案，我能想到的最好、最简单的解决方案是在代码中的导航栏上方制作标题，然后相应地更改CSS。

HTML

<div class="header">
<div>qzzz</div>
</div>
<div class="sidebar">
<div class="logo-details"></div>
<ul>
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
<ul
class="submenu"
#submenu
[ngStyle]="{
height: menu.active ? submenu.scrollHeight + 'px' : 0 + 'px'
}"
>
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
</ng-container>
</li>
</ul>
</div>

CSS：在头类中替换此边距

margin: 0 0 0 20%;