无法显示：在具有背景的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上面的元素

回答

相关问题