Div出现在输入后面

Question

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

我的问题和问题是为什么rainbowBg div出现over input而不是它？我尝试定位输入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”添加到您的彩虹类中。

Answer 2

只需给div一个否定的z-index。您甚至可以从输入中删除z-index。

.rainbowBg {
    z-index: -1;
}

http://jsfiddle.net/b03acbdu/6/

它落后于input因为z-index是针对非定位元素而进行的，因此givern的固定值为0.来自MDN：

  

如果未指定z-index属性，则在默认渲染层0（零）上呈现元素。

就z-index相对于父文件或整个文档而言，MDN再次有一篇描述The Stacking Context的有用文章。 .rainbowWrap的孩子被置于他们自己的堆叠环境中，因为.rainbowBg是其中的孩子，它始终是＆＃34;在＃34}之上。它是所有人的背景。或者正如文章所说的更好：

  

沿Z轴计算堆叠元素的渲染顺序的简单方法是将其视为＆＃34;版本号＆＃34;排序，其中子元素是其父级主要版本号下面的次要版本号。