html - 输入后面出现的div

Question

我试图回答这个问题:How to make a colorful gradient glow around your input-box?

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

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

尝试输入。只有在输入边框和 rainbowBg div 之间单击，才能聚焦它。我只在 Chrome 中测试过。

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

Answer 1

z-index 仅在您定义位置时有效。将“position:relative”添加到您的彩虹类。