div出现在输入后面

Question

我试图回答这个问题：如何使输入框周围的彩色渐变发光？

我的问题，问题是为什么在rainbowBg DIV出现over的input，而不是落后吗？我已经尝试定位输入absolute，设置z-indexes，但没有任何效果。

<div class="rainbowWrap">
    <div class="rainbowBg"></div>
    <input class="rainbow" type="text"/>
</div>

尝试输入输入。只有在输入边框和rainbowBgdiv 之间单击时，才可以对其进行聚焦。我只在Chrome中测试过。

http://jsfiddle.net/b03acbdu/4/

Answer 1

z-index仅在定义位置时有效。在您的Rainbow课程中添加“ position：relative”。