css - 添加 或任何内容会使我的背景图片和我的 div 的内容消失

Question

我的一些 div 有一个奇怪的问题。现在我的 div 被设置为占据整个屏幕，然后有一个背景颜色，然后在它上面有一个背景图像。然而，虽然一切都正常显示，但如果我尝试添加任何内容，除了我的背景颜色之外，所有内容都会消失。我以前从未遇到过这个问题，我相信这与我的图像和 div 的设置方式有关。但是我找不到解决方案，所以我想知道你们中的任何人都可以提供帮助!我在下面包含了 html 和 css!

这是可能有用的 jsfiddle:http://jsfiddle.net/e7C87/1/红色部分是我试图放置导航栏和背景图像消失的部分

Html(带有 的区域是给我问题的 div，所有其他 div 都正确显示):

<div id="induoIntro" class="divide">
                <div class="graphic" style="background-color:#ff837b">
                    <p id="introGraphic"></p>

                    <nav>
                        <a href="#designers">Designers</a>
                        <a href="#developers">Developers</a>
                        <a href="#directors">Directors</a>              
                    </nav>

                </div>

                <div class="textBody">
                     <p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>   
                </div>
            </div>

            <div id="designers" class="divide">                 
                <div class="graphic" style="background-color:#FFB37B">
                    <p id="designGraphic"></p>
                </div>

                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

            <div id="developers" class="divide">
                <div class="graphic" style="background-color:#CEE28F">
                    <p id="devGraphic"></p>
                </div>
                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

            <div id="directors" class="divide">
                <div class="graphic" style="background-color:#C195DA">
                    <p id="directGraphic">
                </div>

                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

CSS:

.divide {
    height:200%;
}

.graphic {
    display:table; 
    height:50%;
    width:100%;

}

.graphic p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

#introGraphic {
    background-image: url(../images/WAInduo-02.svg);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

#designGraphic {
    background-image: url(../images/WAdesign-03.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center;
}

#devGraphic {
    background-image: url(../images/WAdevelop-04.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: bottom center;
}

#directGraphic {
    background-image:url(../images/WAdirect-05.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.textBody {    
    display:table; 
    height:50%;
    width:75%;
    margin:auto;
}

.textBody p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size:45px;
    margin:auto;
}

Answer 1

好吧，你那里有很多不相关的代码。这是一个 JSFiddle 和与您的问题相关的代码(可能很难确定，但如果可能的话，它真的有助于仅提供我们解决您的问题所需的必要代码): <强> JSFiddle

HTML:

<div id="header">
</div>
<div id="induoIntro" class="divide">
    <div class="graphic">
        <p>Graphic Test</p>
        <nav>Test</nav>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}

#header {
    position: absolute;
    height: 70px;
    top: 0;
    width: 100%;
    background-color: #fff;
}

.divide {
    height: 200%;
}

.graphic {
    display: table; 
    height: 50%;
    width: 100%;
    background: #ff837b;
}

.graphic p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

正如您从 JSFiddle 中看到的那样，<p> “图形测试”的内容显示正确，但 <nav>内容不是。好吧，如果你看一下 CSS，你会看到 any <p> 元素是具有 .graphic 的元素的子元素类有特殊说明，即display: table-cell , vertical-align: middle; , 和 text-align: center; .

<nav>然而，类没有这样的特殊说明。如果您从您的 .graphic p 中删除这些说明选择器，您会看到“图形测试”也消失了。它要去哪里？您可以使用浏览器的内置代码检查器找到它，但我只想告诉您:它正在向上移动到文档的顶部。

但是等等，这不是您的标题所在的位置吗？确切地。你有一个绝对定位 header ，这意味着它已从正常文档流中删除并放置在文档的之上。所以，实际上你的 <nav> 元素被您隐藏了 header .为了说明这一点，我们将为您的标题添加一些不透明度，并查看其后面的元素:

JSFiddle

现在，如果我们返回到您最初提供的 JSFiddle，并对那里的 header 执行相同的操作，您将看到: JSFiddle

所以要解决这个问题，您应该使用 .graphic p 的 CSS 属性并将它们复制到新的选择器，.graphic nav ，或类似的东西。希望这可以帮助! :-)