股利出现输入

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中进行过测试。

​​

Answer 1

的z-index只有当你确定位置的作品。给你的彩虹班加上“职位：亲戚”。

Answer 2

只要给div一个负数z-index。您甚至可以从输入中删除z-index。

.rainbowBg { 
    z-index: -1; 
} 

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

是不言而喻的，因为input是z-index ingored用于非定位的元素等givern的0。从MDN固定值后面：

当没有Z-index属性被指定时，元素在默认渲染层0（零）上呈现。

在z-index是相对于亲本或整个文档的方面，MDN再次具有描述The Stacking Context一个有用的制品。 .rainbowWrap的孩子被放入他们自己的堆叠环境中，因为.rainbowBg是它的孩子，它将始终位于它的prent背景之上。或者如文章所述：

找出Z轴上堆叠元素的渲染顺序的一个简单方法是将其视为一个“版本号”排序，其中子元素是次版本数字在他们父母的主要版本号下面。