时间戳

首页 > 解决方案 > 基于百分比的底部值不适用于页面加载

html - 基于百分比的底部值不适用于页面加载

问题描述

我注意到一个奇怪的......“错误”......

我有一些看起来像这样的 CSS：

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

这针对在我的 WP 插件代码中创建的一些 HTML：

$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然后它每次都有效。我怎样才能让它使用百分比和工作？

标签： htmlcssposition

解决方案

绝对定位的元素以这种方式显示在页面上相对于文档的位置，使用顶部、左侧、底部和右侧 CSS 属性，您可以指定精确位置。尝试这个：

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

推荐阅读