I am currently facing an issue with a navigation div that is positioned at the top of my page. The div, which consists entirely of text, functions properly. However, when I scroll over an image or text on the page, the content inside the div becomes difficult to see clearly. To address this problem, I attempted to add a background color to the div tag. Unfortunately, the background color caused the entire page to change color and cover everything unexpectedly.
Could this be happening because the div is anchored at the top? Is there a way to resolve this issue?
I apologize for not providing any code earlier. Here is essentially what I have implemented:
<html>
<head>
<title>stack overflow</title>
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #0000FF;
}
</style>
<link href="yotb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav"><center>HEADER</center></div>
<div id="container">
<div id="content">
PAGE CONTENT
</div>
</div>
</div>
UPDATE: Following Karim's solution, the issue has been resolved. Thank you to everyone who provided assistance.