css - 将相对 div 放在另一个填充整个 div 的 div 上

Question

我有一个 div 类 main-div 及其子 div 类 sub-div。 sub-div 包含一些数据。我想将另一个 div append 到 sub-div ，它应该像面具一样覆盖整个 sub-div 。我喜欢用 css 来做到这一点。但我没有得到实际结果。

HTML

<div class="main-div">
    <div class="sub-div">
        jhgsdfjgjsdgfjgsdfgsdf<br />
        ugsdfgsdfgsgfjdgjfsdgsdf<br />
        jhgsdfjgjsdgfjgsdfgsdf<br />
        ugsdfgsdfgsgfjdgjfsdgsdf<br />
    </div>
</div>

CSS

.main-div{
    background-color: #F00;
    width: 100%;
    height: 300px;
}
.sub-div{
    background-color: #000;
    width: 50%;
    height: 200px;
    margin-left: 50px;
    color: #FFF;
}
.in-div{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5)
}

JavaScript

$(function(){
    var html = '<div class="in-div"></div>';
    $('.sub-div').append(html);
});

据我所知，如果我将一个 div 放在另一个 div 中，并给出 width 和 height 作为 100%，那么它将具有父元素的宽度。在这里，当我将 position: relative 赋给 in-div 时，它会获得父级的 width 和 height。但是当 position 变成 absolute 或 fixed 时，它就坏了。

我的 fiddle 是 http://jsfiddle.net/arunsankars1989/wfhfyf4a/

当前结果是

预期结果是

请帮忙。提前致谢

Answer 1

只需将 position:relative 设置为 .sub-div，并将 position:absolute 设置为它的内部 div( mask ):

检查 DEMO

.sub-div{
background-color: #000;
position: relative;
width: 50%;
height: 200px;
margin-left: 50px;
color: #FFF;
}
.in-div{
position: absolute;
width: 100%;
top:0;
left:0;
bottom:0;
background-color: rgba(255, 255, 255, 0.5)
}