javascript - 如何确保 slider 文本位于图像下方

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 链接中的输出 Pane 变小，文本会显示出来并且不会保持隐藏状态。

如何使用 z-index 使其位于图像下方，使其不显示并保持隐藏状态。

Answer 1

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

.box { 溢出:隐藏； 如果文本超出图像范围，将使文本不可见。

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