Bootstrap：背景图像z-index将其显示在bg颜色之上

Question

请参阅笔here

我要编码此图片

这就是我正在做的事情

   <div class="container-fluid"  id="contactbg">
        <div class="row">
            <div class="col-md-12 col-xs-12" id="info">
                <h1 >Get More Information</h1>
                <h2>on our educational and training programs </h2>
            </div>
        </div>
        <div id="pos">
          <div class="row" id="contact">
            <div class="col-md-12 col-xs-12">
                <div class="row">
                    <div class="col-md-4  col-sm-4 col-xs-12">
                       form here 
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

这是css

#contact {
    background:#0072d5;//blue 
    padding: 20px ;  
}
#contact .form-control{
    background: transparent;
    border-radius: 4px; 
    border-color: #fff;

}
#pos{position: relative;}
#contactbg{
    position: relative;        
    background: url(../images/contact-bg.png) no-repeat ;
    background-position: right center;
    z-index: 99999999 !important;
}

现在这就是我得到的输出

如何解决此请求帮助

Answer 1

在这里：codepen.io。您只需要替换类contact和contactbg。并且将图像上的人分开，没有背景，使用position:absolute将另一个div分割。

Answer 2

position:relative需要更改为position:absolute

像这样：

#contactbg
{ 
    position: absolute; 
    background: url(../images/contact-bg.png) no-repeat ; 
    background-position: right center; 
    z-index: 99999999 !important; 
}

希望这有帮助！