無法顯示：在具有背景的div上面的元素

我想添加一些樣式到一個窗體，我有麻煩創建一個div /輸入下使用：僞元素後面的陰影。

當我把div/input直接放在上面時，它按我的預期工作。但是，當我嘗試將其放置在具有背景顏色的另一個DIV中時，僞元素永遠不會顯示。

查找下面的jsfiddle和HTML/CSS。

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; 
}

能不能幫我弄清是怎麼回事？

來源

2016-11-22 AntonioTorrez

Z-指數-1可能解釋這種行爲;我猜你的影子背後是你的包裝div的背景顏色 – meavo

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

Fiddle

來源

2016-11-22 21:38:36 ksav

無法顯示：在具有背景的div上面的元素

回答

相關問題