Question

我有一个问题我正在添加到我的滑块，当缩放页面高度不一致时。它并非以绝对位置坐在页面上。如果我添加绝对位置它会消失吗？

继承我的代码：

<div style="heigt: 500px;">
<div class="callbacks_container">
      <ul class="rslides" id="slider4">
       <li><img src="img/businessbig.jpg" alt="">

       <p class="caption">Welcome to Ashley Tate
            <br />
        Thank you for finding time to visit our website – whether you are looking to purchase or are considering selling your business then we are here to help.
            <br />
    Experience counts for everything in business sales and the principle people at Ashley Tate have each been personally involved in business sales and acquisitions for more than thirty years.
            <br />
        Our approach to business sales is refreshingly different; our objective is to deliver professional advice and guidance borne out of an understanding of the sales process and of the market place. </p>

       </li>

      <!--<li><img src="img/cateringbig.jpg" alt=""></li>
      <li><img src="img/nurseriesbig.jpg" alt=""></li>-->
    </ul>
</div>
 </div>

继承人css：

.caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(255,255,255, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  margin-top:- 400px;
  float: left;
 }

当它们扩展到我的媒体查询时，它会在较小的屏幕上显示，但会在较大屏幕尺寸的图像下方向下推。

Answer 1

如果没有看到其余的代码，很难分辨，但通常在父元素未设置为position: relative时会发生这种情况。

绝对定位的元素必须相对于父元素。尝试将position: relative添加到li

Answer 2

在@media（媒体查询）中，添加.caption并尝试更改padding: 10px 20px;或margin-top: -400px;（如果仔细观察，也会更改类型为“o”）。可能是您必须在媒体查询中重新定位它，但重新定位可以改变屏幕大小。

另一种可能性是（如@Stuart所说），其他元素围绕使用另一种position:形式，这会混淆.caption元素的位置。

祝你好运！

滑块上的标题行为不正确

2 个答案: