firefox中使用相对位置时背景图像消失

所以我试着在我正在做一些工作的网站的右上角添加一个徽章。z-index可以将对象浮动到页面内容上方,但每次尝试使用position relative时,背景图像都会消失,只有position absolute显示图像。我真的不想使用绝对值,因为图像需要定位在站点菜单栏的右侧,而不是视区的右侧。

任何想法或建议

<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;
}