Percent Based bottom Value doesn't apply on page load - html

Question

I have noticed a weird ... "bug" ...
I have some CSS that looks like this:
.header-slider-text {
bottom: 40%;
color: #fff;
font-size: 22px;
left: 3%;
position: relative
}
This targets some HTML created in my WP plugin code:
$html .= '<div class="top-header-slider full-width-div">';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/1st-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' </div>';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/2nd-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' <div class="header-slider-text" id="second-header-slide-text">';
$html .= ' <p>At the Nurburgring....</p>';
$html .= ' Click here';
$html .= ' <p>and find out why</p>';
$html .= ' </div>';
$html .= ' </div>';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/3rd-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' <div class="header-slider-text" id="third-header-slide-text">';
$html .= ' Click Here';
$html .= ' <p>to see more</p>';
$html .= ' </div>';
$html .= ' </div>';
$html .= '</div>';
However, I've noticed that when I use 40% for my bottom value, on page load it doesn't move my div up 40%. If I changed the value to 333px then it works, everytime. How can I get it to use percentages and work?

Answer 1

absolutely positioned element is displayed on the page in relation to the document this way, using the top, left, bottom and right CSS properties, you can specify an exact position.
try this:
.top-header-slider{
position: relative
}
.header-slider-text {
bottom: 40%;
color: #fff;
font-size: 22px;
left: 3%;
position: absolute
}