bootstrap 3 z-index 将一个 div 置于另一个 div 之上

Question

我试图将 div 放在 bootstrap 中的另一个 div 之上，我没有更改 bootstrap 的任何 css 所以所有下面的代码 bootstrap 没有自定义 css 添加。

<div class="col-lg-3 listing-panel side-bar-for-single-listing" style="margin-top: 10px;">

      <div class="col-lg-12" style="z-index: 999; background: red; height: 40%;">   </div>  

        <form class="col-lg-12" style=" ">

            <legend>Contact</legend>

            <div class="form-group">
                <label for="IDinputName">Name*</label>
                <input type="text" class="form-control" id="IDinputName" placeholder="Name">
            </div>

            <div class="form-group">
                <label for="IDinputMobile">Mobile*</label>
                <input type="text" class="form-control" id="IDinputMobile" placeholder="Mobile" >
            </div>

            <div class="form-group">
                <label for="IDinputMessage">Message*</label>
                <textarea id="IDinputMessage" class="form-control" style="height: 100px;"></textarea>
            </div>



            <button type="submit" id="IDcontactSubmitBtn" class="btn btn-primary">Send</button>

        </form>

    </div>

这是我目前所拥有的我希望红色框覆盖 100% 的表单元素：

Answer 1

您已将具有 z-index

的 div 设为绝对位置

 <div class="col-lg-12" style="**position:absolute**;z-index: 999; background: red; height: 40%;">   </div>

Answer 2

让我们试试这个！我希望它能有所帮助！ :)

<div class="col-lg-12" style="background: red none repeat scroll 0% 0%; position: absolute; left: 0px; top: 0px; height: 100%; z-index: -1; right: 0px; margin: 0px auto;"> </div>

bootstrap 3 z-index 将一个 div 置于另一个 div 之上

bootstrap 3 z-index place a div over another div

html

css

z-index

twitter-bootstrap