div後不出現文字

我想讓文字出現在包含背景圖片的div元素之後，但是沒有文字出現在它的下面。我不知道要添加什麼，該段落不存在，我已經嘗試了多個「這是一個測試」。div後不出現文字

<div id="opener"> 
<p id="introText"> 
Adam Ginther is a<class id="blueText"> front-end developer</class> with an interest in responsive & mobile design 
</p> 
</div> 
<br> 
<div id="bottomOpener"> 
<p id="awesome"> 
I'm also 100% awesome 
</p> 
</div> 
<p> This is a test</p> 


/* first.css */ 
body { 
    background-color: black; 
    font-family: 'Fenix', serif; 
} 
#opener { 
    background-image: url('../images/background.jpg'); 
    background-color: #373737; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center; 
    height: 800px; 
    width: 100%; 
    position: fixed; 
    text-align: center; 
} 
#introText { 
    width: 400px; 
    height: 40px; 
    margin-left: 200px; 
    left: 20%; 
    color: #ececec; 
    background-color: black; 
    text-align: center; 
    position: absolute; 
    padding: 50px 80px 50px 80px; 
    font-size: 1.2em; 
    /* black, 50% opacity */ 
    background-color: rgba(0, 0, 0, .3); 
    position: absolute; 
} 
#blueText { 
    color:#00aeff; 
} 
#awesome { 
    color: white; 
} 
#bottomOpener { 
    background-color: white; 
} 
p { 
    color: green; 
}

來源

2013-03-18 Adam Ginther

很可能，您的文字隱藏在您的position: fixed;圖片下。您可以改爲position: static;，或者調整段落的位置。如果你有一個jsFiddle，我們可以進一步測試你的情況。

來源

2013-03-18 22:44:42 dezman

工作，謝謝:) – 2013-03-18 22:45:59

那麼'位置：靜態'是默認的，所以沒有必要在這種情況下指定它。 http://www.barelyfitz.com/screencast/html-training/css/positioning/ – Whistletoe 2013-03-18 22:52:43

是的，Whistletoe是對的，你實際上並不需要特定的位置：static;因爲它的默認值，你也可以使用position：relative;代替。 – dezman 2013-03-18 22:58:47

當您在#opener元素上使用position: fixed時，它將從文檔的正常流中提取並顯示在其餘內容的頂部。你想看到的p元素因此隱藏在下面。

來源

2013-03-18 22:47:36 Whistletoe

正如其他答案中所述，您的文字落後於您的intro。這是一個小提琴，通過將z-index: -1添加到您的#opener來修復它http://jsfiddle.net/ASd33/。

請注意，這不是一個好的解決方案，但它足以讓您進行調試。

來源

2013-03-18 22:47:57 hexblot

div後不出現文字

回答

相關問題