文本從容器div中移出

Question

CSS代碼：

    #overlay {
        background: rgba(0,0,0,0.8);
        position: absolute;
        z-index:100;
        width: 100%;
        color:#fff;
        height: 100%;
    }

html代碼：

    <div class="container" style="border:1px solid #000;">
    <div class="row">
        <div class="col-md-12">
             <div id="overlay">Overlay</div>
                    Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. 
             </div>
        </div>
    </div>

出於某些原因，我無法在容器中顯示背景覆蓋。 查看演示： http : //www.bootply.com/PJiifhEI8u

Answer 1

只需添加top:0; left:0; 定位到CSS：

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width: 100%;
    color:#fff;
    height: 100%;
    top:0;
    left:0;
}

更新了Bootply

根據您的評論進行更新：

將填充物添加到覆蓋層的一種方法是使用calc使覆蓋層的30px小於100％，然后添加15px的左邊距以使其居中：

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width:calc(100% - 30px);
    color:#fff;
    height: 100%;
    top:0;
    left:0;
    margin-left:15px;
}

Bootply