Unable to show text on top of an image

I am trying to show text on top of an image and when I view it in the preview of the design view of the visual web developer studio,I can see the text but when I generate the website I dont see it .

The code is :

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

The CSS is :

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

Any inputs wo开发者_如何学JAVAuld be great,thanks !

You need to make the bar div's Position: absolute; That takes its allocated space out of the html flow

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

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