Процентное нижнее значение не применяется при загрузке страницы

Question

Я заметил странную ... "ошибку" ...

У меня есть немного CSS, который выглядит следующим образом:

.header-slider-text {
    bottom: 40%;
    color: #fff;
    font-size: 22px;
    left: 3%;
    position: relative
}

Это предназначается для некоторого HTML, созданного в моем плагине WPcode:

$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 .= '            <a href="">Click here</a>';
$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 .= '            <a href="">Click Here</a>';
$html .= '            <p>to see more</p>';
$html .= '        </div>';
$html .= '    </div>';
$html .= '</div>';

Однако я заметил, что когда я использую 40% для моего значения bottom, при загрузке страницы он не сдвигает мой div на 40%.Если я изменил значение на 333px, тогда оно будет работать каждый раз.Как я могу заставить его использовать проценты и работать?

Answer 1

Абсолютно позиционированный элемент отображается на странице по отношению к документу, таким образом, используя верхний, левый, нижний и правый свойства CSS, вы можете указать точную позицию.попробуйте это:

.top-header-slider{
   position: relative
}
.header-slider-text {
    bottom: 40%;
    color: #fff;
    font-size: 22px;
    left: 3%;
    position: absolute
}