I am trying to overlay another element on top of the body tag in my HTML, which has already been assigned a color. I have experimented with using position relative and absolute along with z-index but haven't found a solution yet.
Here's how I've styled the body tag:
<body bgcolor="cyan" style="position: relative;">
This is the element I want to overlay:
<p class="content">a</p>
After doing some research online, this is the CSS I found and tried:
.content{
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}