div 背景颜色

Question

我在尝试让背景颜色显示在 div 上时遇到了麻烦。我试过指定宽度、高度、溢出等，但没有运气。代码如下。我可以更改内部 div 背景，但不能更改包含的 div。

有问题的 div 是 header-top-container。任何帮助是极大的赞赏。

.header-top-container {
  background: #F0F0F0;
  overflow: hidden;
}

.header-top-container>.main-container {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.main-container {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: 15px;
}

body .header-top-container .external-store-tab {
  width: 360px;
}

body .header-top-container .external-store-tab,
body .header-top-container .account-cart-wrapper {
  position: relative;
  width: 70%;
}

<div class="header-top-container">
  <div class="main-container header-main-container">
    <div class="external-store-tab">
      <div class="tab-item">
        <a href="https://www.example.org">
          <img src="https://www.example.org/logo-foundation.png" class="tab-logo">
        </a>
      </div>
      <div class="tab-item active">
        <a href="http://store.example.org/">
          <img src="https://www.example.org/logo-store.png" class="tab-logo">
        </a>
      </div>
    </div>
    <div class="account-cart-wrapper">
      <a href="http://www.example.org/contact/" class="account-link hide-mb">
        <span class="label" style="color:#008CA8;">
                    <i class="fa fa-envelope" aria-hidden="true"></i> &nbsp;
                    <span class="bar-text" tyle="font-family: 'Open Sans',sans-serif;">Contact</span>
        </span>
      </a>
      <a href="tel:800.222.5870" class="account-link">
        <span class="label" style="color:#008CA8;">
                    <i class="fa fa-phone fa-lg" aria-hidden="true"></i> &nbsp;
                    <span class="bar-text" style="font-family: 'Open Sans',sans-serif;">800.222.5870</span>
        </span>
      </a>
      <a href="https://store.example.org/customer/account/login/" class="skip-link skip-account account-link sign-in-bar">
        <span class="label">
                    <i class="fa fa-user fa-lg" aria-hidden="true"></i> &nbsp;
                    <span class="bar-text" style="font-family: 'Open Sans',sans-serif;">Sign in</span>
        </span>
      </a>
      <a href="https://store.example.org/checkout/cart/" class="skip-link skip-account account-link">
        <span class="label">
                    <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
                </span>
      </a>

    </div>
  </div>
</div>

Answer 1

添加到类“header-top-container”，属性“position:inherit”类，如下：

.header-top-container {
    background: #F0F0F0;
    overflow:hidden;
    position: inherit;
}

Answer 2

您的#custom-layer1 具有与页面匹配的背景。您的 header-container-top 正在改变颜色，但是可以通过#custom-layer1 的背景来“绘制”。