bootstrap 3 z-index将div放在另一个div上

时间:2016-05-22 11:57:55

标签: html css twitter-bootstrap z-index

我正在尝试将div放在bootstrap中的另一个div上,我没有更改任何引导程序的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%的表单元素:

enter image description here

2 个答案:

答案 0 :(得分:1)

我们来试试吧!我希望它可以帮助你! :)

if(pageId==="someDesiredId") {
   // do this animation
} else {
   // do else kind of animation
}

答案 1 :(得分:0)

你的位置绝对是具有z-index

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