股利出現輸入

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軸上堆疊元素的渲染順序的一個簡單方法是將其視爲一個「版本號」排序，其中子元素是次版本數字在他們父母的主要版本號下面。