如何确保滑块文本保留在图像下方

Question

我有以下页面：http://jsfiddle.net/ybv4jd9d/

HTML：

<div class="box hidOverflow marginCenter">

  <div class="caption setLeft">
    <h3>This is Image One</h3>
    <p>This is a description or a start to the image one article...</p>
  </div>

  <img src="http://pagesbyz.com/n4n/theImages/banner.jpg" />

</div>

如果在jsfiddle链接中输出窗格变小，则文本显示并且不会保持隐藏。

如何使用z-index将其放在图片下方，以便它不会显示并保持隐藏状态。

Answer 1

当我向box-div添加溢出时，文本会在缩小页面时隐藏自身。 以下是您的问题的解决方案：

.box {overflow:hidden;}

Answer 2

JSFiddle：http://jsfiddle.net/0vwm1vq0/

.box { overflow:hidden; }如果文字落在图片之外，会使文字不可见。

如果您希望文本始终可读[在灰色区域内]，则需要使用media queries动态减小字体大小。