Javascript 图像下2个div填充透明颜色[html]

我有一个带有透明文本的图像，还有一个div是填充该文本的纯色，允许用户更改颜色。现在这一切都是可行的，但当需要另一个div覆盖另一组透明文本时，它会带来问题。这两个颜色div彼此叠加，但我希望第二个div在第一个div下面一点，但仍然在图像下面

这是我的密码：

<tr><td colspan="3" style="border-bottom:solid 1px #eee;position:relative;">
        <img src="/sig/<?php echo $username; ?>?mask=1&bg=<?php echo $bg_name;?>" style="position: relative;width:240px;height:66px;z-index: 1;" id="selected_bg"/>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['usrname_color']; ?>" id="usrname_color"></div>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['text_color']; ?>" id="text_color"></div>

    </td></tr>

？掩码=1&bg=“style=”位置：相对；宽度：240px；高度：66px；z指数：1；“id=”选定的“/>
不确定我是如何让它工作的，但我在第二个div之后添加了“px”，它就工作了。看起来像这样：

<tr><td colspan="3" style="border-bottom:solid 1px #eee;position:relative;">
        <img src="/sig/<?php echo $username; ?>?mask=1&bg=<?php echo $bg_name;?>" style="position: relative;width:240px;height:66px;z-index: 1;" id="selected_bg"/>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['usrname_color']; ?>" id="usrname_color"></div>
        <div style="position: absolute;top: 20px;left: 5px;width: 96%;height: 40px;background: #<?php echo $session_array['text_color']; ?>" id="text_color"></div>

    </td></tr>


遮罩=1&bg=“style=”位置：相对；宽度：240px；高度：66px；z索引：1；“id=”选定的“/>
然后你应该给出不同的位置（顶部和左侧），它们都是
绝对的
定位div，具有
顶部
作为
0
好，我知道，但我不确定要改变什么才能使其工作？也许有人修改了它并制作了一个JSFIDLE，这样它就可以工作了？当我在第二个div中执行“top:1”时，它会自动移动到图像的底部，而这不是我现在的目标。我要把它放在下面