背景颜色保持白色

Question

我正在建立一个网站，但由于某种原因我的background-color无效。没有任何事情发生，background-color只是保持白色。

无效的代码如下：

.sub-header {
    background-color: black !important;
}

我在jsfiddle的完整代码：https://jsfiddle.net/j7mdqaop/和有趣的行是158,159,160。

Answer 1

这是因为.sub-header中的所有元素都不在流中（因为绝对位置）

See this fiddle

.sub-header {
    background-color: black !important;
    display: block;
}

.main-navbar-heading-2 {
    top: 5px;
    left: 5px;
    text-decoration: none;
    color: black;
    font-family: Raleway;
    font-size: 1.3em;
}

注意：我添加display: block;以使background-color属性占据所有行，而不只是标题“Chezzles”，但如果inline，则可以保留titleForHeaderInSection你想要的。

Answer 2

如果我理解正确，你会尝试：

<强> HTML

<header class="sub-header">
  <div class="dropdown">
    <a href="#" class="main-navbar-heading-2">Chezzles</a>
    <i class="fa fa-bars fa-fw bars" style="font-size:24px"></i>
  </div>
</header>

<强> CSS

.sub-header {
        background-color: black !important;
    }
    .sub-header .dropdown {
        background-color: black !important;
        width: 100%;
        height: 25px;
        padding: 5px;
    }
    .sub-header .dropdown * {
      color: white;
    }
    .sub-header .dropdown i {
      top: 15px;
    }

    .main-navbar-heading-2 {
        top: 5px;
        left: 5px;
        text-decoration: none;
        color: black;
        font-family: Raleway;
        font-size: 1.3em;
    }

喜欢这个小提琴https://jsfiddle.net/Tanbi/j7mdqaop/4/