I am having an issue of overlaying a hidden div, when I click a button. What I am trying to have happen is when the hidden div appears that it goes on top of everything else below it based on its height. All I can get it to do is push everything else downwards as you can see in my snippet.

Other solutions that I have looked at haven't taken in consideration of using bootstrap, and when I am testing out the solutions I have found, it puts everything out of whack, and that would be when I use absolute as position, like the solutions I have seen.

Any help would be appreciated.

```js
$(document).ready(function () {

  $("#myHiddenDiv").hide();

});

$("#myBtn").click(function () {
  $("#myHiddenDiv").toggle();
});

$("#btn2").click(function () {
  $("#myHiddenDiv").toggle();
});
```

```css
#myHiddenDiv {
    /*width: 325px;*/
    height: 300px;
    border: 1px solid green;
    background-color: cornflowerblue;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
    <div class="container-fluid">
        <div class="form-horizontal">
            <div class="row row-splitter">
                <label for="ddLocation" class="col-md-1 control-label">Location</label>
                <div class="col-md-2">

                    <div class="btn btn-primary" id="myBtn">Click Me</div>
                </div>
                <div id="myHiddenDiv" class="col-md-offset-1 col-md-10" style="z-index:2; position:relative">
                    <div id="MaterialGridList">

                    </div>
                </div>
            </div>

            <div style="z-index:1; position:relative;">
                <div class="row row-splitter">
                    <label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" placeholder="Location Material.." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Color</label>
                    <div class="col-md-2">
                        <input type="text" id="ddColor" class="form-control" style="width:100%" />
                    </div>

                    <label for="qty" class="col-md-1 control-label">Length</label>
                    <div class="col-md-2">
                        <input type="text" id="qty" class="form-control" placeholder="Length..." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Width</label>
                    <div class="col-md-1">
                        <input type="text" id="qty2" class="form-control" placeholder="Width..." />
                    </div>

                </div>

                <div class="row row-splitter">
                    <label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
                    <div class="col-md-1">
                        <input type="text" class="form-control" placeholder="Width..." />
                    </div>

                </div>
                <div class="row row-splitter">
                    <div class="col-md-10 col-lg-offset-1">
                        <div style="border:1px solid black; height:400px; border-radius:5px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
```