Delay display of an object is moving items on different z-indexes - html

Question

I have a container div. Inside that I have 6 things. A banner div, an upperstrip div, a video div, a counter div and a bottom div. Inside the bottom div is a lowerstrip div.
When the delayed item displays it bumps the lowerstip div down the page by the amount the the counter is located. All of these divs except for the container have z-indexes called out in my CSS.
<div id="container" style="text-align: center;">
<div id="banner">
<img src="banner.png" alt="banner" />
</div>
<div id="upperstrip">
<p><h2 style="color:white; background-color: #0f2781;">
Puzzle Registration </h2></p>
</div>
<div id="video">
<video controls autoplay>
<source src="prsm_animation.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="counter" data-delay="9" style="display:none; width: 100%">
</br>
<a href="http://www.xxxx.com">
<img src="bluebar.jpg" alt="bluebar" /></a>
</div>
</div>
<div id="bottom">
<div id="lowerstrip">
<p><h4 style=" color: white; vertical-align:bottom;
background-color: #0f2781; text-transform: uppercase;">
Enter your puzzle number in the blue bar above to
register for these
great prizes! </h4></p>
</div>
</div>
</div>
My CSS looks like this:
#video {
position: absolute;
z-index: -10;
}
#counter {
position: absolute;
top: 0px;
width: 803px;
margin: auto;
text-align: center;
z-index: 10;
}
#upperstrip {
position: static;
width: 850px;
text-transform: uppercase;
z-index: 40;
}
#lowerstrip {
position: static;
width: 850px;
top: 400px;
height: 19px;
z-index: 60;
}
#bottom {
position: absolute;
width:850px: height: 1300px;
z-index: 80;
background-color: #ff0000;
}