文本走出容器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;
}

Updated 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