Question

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

我有一些看起来像这样的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，则每次都可以使用。如何使用百分比来工作？

Answer 1

这样，相对位置

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

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

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

1 个答案: