将相对div放在另一个div上，填充整个div

Question

我有一个div的课程main-div及其子div的课程sub-div。 sub-div包含一些数据。我想将另一个div添加到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时，它就会崩溃。

我的小提琴是http://jsfiddle.net/arunsankars1989/wfhfyf4a/

目前的结果是

预期结果是

请帮忙。提前致谢

Answer 1

只需将position:relative设置为.sub-div，将position:absolute设置为内部div（掩码）：

检查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)
}

Answer 2

演示 - http://jsfiddle.net/wfhfyf4a/6/

将position设置为absolute的{​​{1}}并添加.in-div，以便top:0与div top对齐元素

relative

Answer 3

DEMO

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