I am currently facing an issue with a fixed header and full-screen background image. The problem arises when I try to display an alert on top of the page, pushing down the header and hero section. However, I am encountering difficulties as the alert either does not appear at all or if it does, it fails to remain fixed and scrolls with the page.
.sitrep {
top: 0;
height: 50px;
width: 100%;
position: fixed;
z-index: 10000;
}
.siteHeader {
min-height: 76px;
height: 76px;
overflow: visible;
background-color: #000;
color: #f4f4f4;
position: fixed;
top: 0;
z-index: 10000;
}
#hero {
height: 100vh;
}
.hero {
background: url(images/hero-bg.jpg) no-repeat top center;
background-color: #000;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#hero-content {
position: absolute;
width: 100%;
bottom: 0%;
}
#hero-content a {
background-color: #131313;
padding-top: 10px;
height: 40px;
display: block;
font-size: 12px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#hero-content img {
display: block;
margin-top: 2px;
max-height: 145px;
margin-right: auto;
margin-left: auto;
margin-bottom: 53px;
padding: 5px;
}
<div class="sitrep">
<div class="alert-status">
<div class="info">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Announcement!</strong> announcement goes here.
</div>
</div>
</div>
<div id="siteHeader">my header</div>
<!-- Hero Unit -->
<div id="hero" class="hero">
<div id="hero-content">
<img src="content/images/logo-dt.png" class="img-responsive">
<a class="button" role="button" href="#base">Learn more</a>
</div>
</div>