Javascript 如何确保滑块文本位于图像下方

我有以下一页：

HTML:

这是图像一
这是一个描述或开始的形象一篇文章

如果输出窗格在JSFIDLE链接中变小，文本就会显示出来，并且不会保持隐藏状态

---

如何使用

z-index

使其位于图像下方，使其不显示并保持隐藏状态。

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

.box {overflow:hidden;}

JSFiddle：

.box{overflow:hidden；}

将使文本在图像之外不可见

---

如果您希望文本始终可读[在灰色区域内]，则需要使用

媒体查询

来动态减小字体大小。

我想您可以使用媒体查询以较小的宽度为目标，或者使用display:none隐藏div，或者使用z-index:-1

.box {overflow:hidden;}