为什么我看不到我的作品

Question

嗨我一直在测试一个页面，它一直很好，直到我试图让我的标志“GJB”颜色：白色。当我这样做的时候再也看不到写作了。我不知道为什么会发生这种情况？这是我的代码，如果你去标题{颜色：黑色}并将其更改为白色即将消失。 http://jsfiddle.net/wy0doL5d/

<div class="pic"><img src="img/lgo.png"></div> 
    <header> 
     <div id="header-container"> 
     <nav> 
      http://jsfiddle.net/wy0doL5d/#update <h1>GJB</h1> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a>About</a></li> 
      <li><a>Shop</a></li> 
      <li><a>Contact</a></li> 

      </ul> 
      </nav> 
     </div> 

    </header> 

    <section class="home-intro"> 
    <div id="container"> 
    <h2>Hello there how you doing</h2> 
    </div> 
    </section> 
    <main> 
    <div id="container"> 
    <p>Hello there how you doing</p> 
    </div> 

    </main> 
    <main> 
    <div id="container"> 
    <p>Hello there how you doing</p> 
    </div> 

    </main> 
    <main> 
    <div id="container"> 
    <p>Hello there how you doing</p> 
    </div> 

    </main> 
    <main> 
    <div id="container"> 
    <p>Hello there how you doing</p> 
    </div> 

    </main> 

Answer 1

这是因为CSS是层叠。它会滴流到后代。你想把颜色放在CSS的下层元素上。

Answer 2

很奇怪，你可以看到其他颜色 - 如果你改变为红色，黄色或几乎除了白色以外的任何东西，它仍然可见。老实说无法告诉你为什么会发生这种情况 - 认为在几个地方使用混合模式可能有些事情要做（混合变暗会消除白色），但删除这些似乎没有帮助。

您的“标题”也没有高度属性。如果添加一个，您会发现无论颜色如何，“GJB”文本都变得可见。

header{ 
    background-color: #1800ff; 
    top: 0; 
    z-index: 30; 
    position: relative; 
    border: 1px solid white; 
    height: 60px; 
    color:white; 
} 

http://jsfiddle.net/wy0doL5d/6/