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

添加到类＆＃34; header-top-container＆＃34;，property＆＃34; position：inherit＆＃34;类，如下：

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

Answer 2

您的#custom-layer1具有与页面匹配的背景。你的header-container-top正在改变颜色，但正在被#peed-layer1的背景“涂抹”。

Div背景颜色

2 个答案: