表示できません：背景のdivの上の要素の後

Question

みんな。

フォームにスタイルを追加しようとしていますが、：after擬似要素を使用してdiv/inputの下にシャドウを作成しようとしています。

divの上にdiv/inputを直接置くと、期待どおりに動作します。しかし、背景色で別のDIVの中に配置しようとすると、疑似要素が決して表示されません。

下記のjsfiddleとHTML/CSSを見つけてください。

https://jsfiddle.net/a60k3h6v/

HTML

<div class="home-header-input"> 
    <input type="text" value="" placeholder="Type your text here" class="home-header-input"> 
</div> 

<div class="i-will-break-everything"> 
    <div class="home-header-input"> 
    <input type="text" value="" placeholder="Type your text here" class="home-header-input"> 
    </div> 
</div> 

CSS：あなたは私が間違って何が起こっているかを把握

div.home-header-input { 
    width: 40%; 

    background-color: #fff; 
    vertical-align: top; 
    height: 100px; 
    border-radius: 5px; 
    position: relative; 
} 

div.home-header-input:after { 
    content: ""; 
    display: block; 
    border-bottom: 12px solid #e1e1dc; 
    position: absolute; 
    z-index: -1; 
    bottom: -4px; 
    width: 100%; 
    left: 0; 
    right: 0; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

input.home-header-input { 
    margin: 34px 24px 34px 22px; 
    color: #324b5a; 
    border: none; 
    padding: 0; 
    width: 61%; 
    background: transparent; 
    outline: 0; 
    line-height: 1; 
    font-size: 1.4em; 
} 

.i-will-break-everything { 
    margin: 30px 0; 
    padding: 30px; 
    width: 100%; 
    height: 400px; 
    background: #fff39b; 
} 

を助けてもらえますか？

Answer 1

.i-will-break-everything { 
    margin: 30px 0; 
    padding: 30px; 
    width: 100%; 
    height: 400px; 
    background: #fff39b; 
    position: absolute; 
    z-index: -2; 
} 

Fiddle