當在Firefox中使用相對位置時，背景圖像會消失

Question

所以我試圖在我正在做一些工作的網站的右上角添加徽章。 z-index用於浮動頁面內容上方的對象，但每次我嘗試使用相對於背景圖像的位置時，僅消失位置絕對顯示圖像。我不想絕對使用，因爲圖像需要位於網站菜單欄的右側，而不是視口的右側。

任何想法或建議讚賞

<div class="badge-box"> 
<a href="http://www.google.com" class="badge">Book Now!</a> 
</div> 

<div id="header"> 
<a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a> 
</div> 

<div id="main-menu"> 
<div> 
<a href="/">Home</a> 
<a href="/cottages.php">Our Cottages</a> 
<a href="/gwynfryn.php">Bed &amp; Breakfast</a> 
<a href="/rates.php">Price Guide</a> 
<a href="/llanbedr.php">Location &amp; Local Attractions</a> 
<a href="/news.php">News &amp; Special Offers</a> 
<a href="/contact.php">Contact Us</a> 
</div> 
</div> 

.badge-box { 
    width: 1030px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 0px solid red; 
} 

.badge { 
    background: url(../images/badge.png) 0px 0px no-repeat; 
    width: 148px; 
    height: 148px; 
    text-indent: -10000px; 
    position: relative; 
    z-index: 999; 
} 

#header { 
    width: 960px; 
    height: 40px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:20px; 
    padding: 20px 0px 0px 20px; 
    background: #58564f url(../images/header-top-background.png); 
} 

#main-menu { 
    width: 980px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 35px; 
    /*background: red;*/ 
    background: #58564f url(../images/header-bottom-background.png); 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 

#main-menu div { 
    width: 776px; 
    height: 35px; 
    margin-left: auto; 
    margin-right: auto; 
    background: blue; 
} 

#main-menu div a { 
    display: block; 
    float: left; 
    padding: 5px 10px 0px 10px; 
    height: 30px; 
    color: #FFFFFF; 
    font-size: 1.2em; 
    text-align: center; 
    background: green; 
} 

#main-menu div a:hover { 
    background-color: #333333; 
} 

Answer 1

，除非你做一個顯示：上.badge類塊，很多您所定義不會生效，因爲它默認爲內聯的樣式。也許這就是你需要開始的一切。

我不確定你試圖達到什麼效果。你能發佈一個png/jpeg的模型嗎？