html - 无法在图片上方显示文字

Question

我试图在图像顶部显示文本，当我在可视化 Web 开发人员工作室的设计 View 预览中查看它时，我可以看到文本，但是当我生成网站时我看不到它。

代码是:

<div id="bar">
<img src="images/bar_bg.jpg" />
 </div> 
   <div id="links" >
        <p>
            <a href="javascript:window.open('/FAQ','Max','toolbar=no,width=750,height=650,status=no,scrollbars=yes,resizable=yes');void(0);">
                FAQ </a>| <a href="javascript:window.open('/PrivacyPolicy','Max','toolbar=no,width=500,height=500,status=no,scrollbars=yes,resizable=yes');void(0);">
                    Privacy Policy</a> | <a href="javascript:window.open('/CustomerService','Max','toolbar=no,width=500,height=500,status=no,scrollbars=yes,resizable=yes');void(0);">
                        Customer Service</a>
        </p>
    </div>

CSS 是:

#links {
Position:absolute; /* 
width: 100%; /* 
text-align: right;
height: 17px;
left: 400px; top:1060px;
z-index: 5;
}

    #bar {

height: 25px; 
width: 900px;
z-index:-10;
}

任何输入都会很棒，谢谢!

Answer 1

您需要使 bar div 的 Position: absolute; 将其分配的空间从 html 流中取出

#links {
width: 100%;
text-align: right;
height: 17px;
}

#bar {
Position:absolute;
height: 25px; 
width: 900px;
z-index:-10;
}