I need a div that remains fixed at the top of my page and overlaps any other elements on the page, similar to the blue search bar on Facebook. Currently, when I scroll down, the table ends up above the div, but I want it to be below the div instead. Here is the code I have so far. However, when I use z-index to adjust the stacking order, the images in my div turn yellowish.
<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv{
position:fixed;
z-index:1;
top:0px;
left:0px;
border:3px groove blue;
height:200px;
width:1360px;
background-color:yellow;
opacity:.4;
margin-right:10px;
}
p.fixPara{
z-index:1;
position:fixed;
letter-spacing:20px;
font-size:50px;
font-weight:bold;
color:purple;
top:20px;
left:7em;
}
table{
background-color:white;
border:3px outset navy;
width:700px;
height:500px;
margin-top:1000px;
margin-left:300px;
}
tr>td{
padding:15px;
font-size:20px;
text-align:center
</style>
</head>
<body>
<div id="fixedDiv"><p class="fixPara">This is Fixed!!</p></div>
<img src="grass.jpg" style="position:fixed;right:3px;top:3px;" height=100px width=150px>
<img src="black.jpg" style="position:fixed;top:3px;left:3px;" height=100px; width=150px>
<table>
<tr>
<th colspan="3"><h2>VISIT THE SUITABLE LINK</h2></th>
</tr>
<td>Google</td>
<td>Youtube</td>
<td>Facebook</td>
</tr>
<tr>
<td>Kickass to</td>
<td>JAVA</td>
<td>Apple</td>
</tr>
</table>
</body>
</html>
Check out the FIDDLE for demonstration.