Div appearing behind input - html

Question

I was trying to answer this question: How to make a colorful gradient glow around your input-box?
My problem and question is why does the rainbowBg div appear over the input and not behind it? I have tried positioning the input absolute, setting z-indexes, nothing worked.
<div class="rainbowWrap">
<div class="rainbowBg"></div>
<input class="rainbow" type="text"/>
</div>
Try typing in the input. You can only focus it if you click between the input border and the rainbowBg div. I have only tested in Chrome.
http://jsfiddle.net/b03acbdu/4/

Answer 1

z-index only works when you define position. Add "position: relative" to your rainbow class.

Answer 2

Just give the div a negative z-index. You can even remove z-index from the input then.
.rainbowBg {
z-index: -1;
}
http://jsfiddle.net/b03acbdu/6/
It goes behind the input because z-index is ingored for non-positioned elements and so givern a fixed value of 0. From MDN:
When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
In terms of z-index being relative to parent or the whole document, MDN again has a useful article describing The Stacking Context. The children of .rainbowWrap are put into their own stacking context, so because .rainbowBg is a child of it, it will always be "on top of" it's prent's background. Or as the article puts it better:
An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.