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

所以我试图在我正在做一些工作的网站的右上角添加一个徽章。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;
}

.徽章盒{
宽度：1030px；
左边距：自动；
右边距：自动；
边框：0px实心红色；
}
.徽章{
背景：url（../images/badge.png）0px 0px无重复；
宽度：148px；
高度：148px；
文本缩进：-10000px；
位置：相对位置；
z指数：999；
}
#标题{
宽度：960px；
高度：40px；
左边距：自动；
右边距：自动；
边缘顶部：20px；
填充：20px 0px 0px 20px；
背景：58564fURL（../images/header-top-background.png）；
}
#主菜单{
宽度：980px；
左边距：自动；
右边距：自动；
高度：35px；
/*背景：红色*/
背景：58564fURL（../images/header-bottom-background.png）；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
}
#主菜单分区{
宽度：776px；
高度：35px；
左边距：自动；
右边距：自动；
背景：蓝色；
}
#主菜单a区{
显示：块；
浮动：左；
填充：5px 10px 0px 10px；
高度：30px；
颜色：#FFFFFF；
字体大小：1.2米；
文本对齐：居中；
背景：绿色；
}
#主菜单分区a：悬停{
背景色：#333333；
}

除非您在该.badge类上执行display:block，否则您定义的许多样式将不会生效，因为它默认为inline。也许这就是你需要开始的全部

---

我不知道你想达到什么效果。你能发布模型的png/jpeg吗？

最后我通过添加position:relative解决了这个问题；至徽章盒类和右侧：0px；去参加徽章班。将图像放置在正确的位置，并允许其与下面的元素重叠。您的解决方案解决了图像显示的问题（对我来说是Doh时刻），但z-index似乎不喜欢具有位置相对属性的元素。