使用CSS将文本拉到前面（或将图像拉到后面），并使用javascript随机选取图像

根据我在这里和其他地方找到的一些例子，我有一个简单的页面

我已经让javascript选择一个随机图像加载到页面上

问题是我还希望文本位于图像的前面。我尝试了一系列css选项来尝试向前拉文本或向后推图像（z-index等），但将它们与javascript结合使用是行不通的。甚至尝试了几个不同的选项，将样式信息添加到标记中，但都没有成功

有人知道怎么做吗？这似乎是我忽略的格式化问题，但它可能与javascript有关

这就是我现在的处境：

函数随机_pic（）{
var pics=新数组（）；
图片[1]=”http://placehold.it/350"
图片[2]=”http://placehold.it/350"
图片[3]=”http://placehold.it/350"
图片[4]=”http://placehold.it/350"
图片[5]=”http://placehold.it/350"
图片[6]=”http://placehold.it/350"
图片[7]=”http://placehold.it/350"
图片[8]=”http://placehold.it/350"
图片[9]=”http://placehold.it/350"
var pic=Math.floor（Math.random（）*pics.length）；
如果（pic==0）{pic=1；}
文件。写（“”）；
}
随机_pic（）
正文{
背景色：#EFEF；
背景重复：无重复；
身高：100%；
保证金：0；
填充：0；
}
.形象{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-1；
}
.风格{
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica；
颜色：#003399；
}








为了保护您帐户的安全，请关闭此选项卡或浏览器
您可以使用负上边距更改订单或z索引。看看


.greenleftarrow{
位置：相对位置；
z指数：10；
显示：块；
背景：绿色url（./images/greenleftarrow.jpg）不重复；
左：10px；
顶部：0px；
高度：140像素；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
#结束{
利润上限：-140px；
}

正文
大多数现代浏览器都使用大量的启发式方法来提高渲染时间，现在，你要反对其中的一种。让我们像浏览器一样思考这个问题：

页面加载后，浏览器会看到以下HTML：

<br><br><br><br><br><br>
<p class="style"><strong>To protect the security of your account,<br> please close this tab or browser</strong></p>

.wrapper{
背景色：#1A1A；
颜色：#FFF；
字体系列：Helvetica；
高度：100vh；
宽度：100vw；
填充：32px
}
正文，html{
身高：100%；
保证金：0
}

为了保护您的帐户，请关闭此选项卡
以下是我根据杰拉德的建议使用的

在javascript底部的“document.write”中，我将image类放在src之前。谢谢大家


函数随机_pic（）{
var pics=新数组（）；
图片[1]=“./images/exit_1.png”
pics[2]=“./images/exit_2.png”
图片[3]=“./images/exit_3.png”
pics[4]=“./images/exit_4.png”
pics[5]=“./images/exit_5.png”
pics[6]=“./images/exit_6.png”
pics[7]=“./images/exit_7.png”
pics[8]=“./images/exit_8.png”
pics[9]=“./images/exit_9.png”
var pic=Math.floor（Math.random（）*pics.length）；
如果（pic==0）{pic=1；}
文件。写（“”）；
}
随机_pic（）
正文{
背景色：#EFEF；
背景重复：无重复；
身高：100%；
保证金：0；
填充：0；
}
.形象{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-1；
}
.风格{
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica；
颜色：#003399；
}








为了保护您帐户的安全，请关闭此选项卡或浏览器
您指的是什么文本，以及带有安全消息的段落？你想把它放在图像的上面吗？一个简单的解决方案是有一个div，你可以通过js改变它的bg&同时文本已经是该div的子级。你没有给图像分配类。图像因此不会使用绝对定位。文件。写（“”）；您正在调用
random_pic（）加载DOM后，即点击按钮等。在真实代码中？图像就像水印…它们不控制文本…它们只是邮件的精简背景。谢谢…这看起来不错，但似乎是基于图像的静态路径预测的…我理解如何做。我的问题是处理javascript中数组生成的随机图像。不过，感谢您的输入。如果有任何问题，您希望在图像和文本上使用绝对定位（并让父对象具有相对位置）来实现它。你正在硬编码一些像素值，A.可能会改变，B.没有响应。谢谢蒙蒂…这对静态图像有效。需要动态javascript部分来完成我想要的。杰拉德给了我上面的答案。