下拉菜单位于bootstrap 3的面板下方

Question

My html is:

<div class="row" style="width: 500px">
    <div class="col-md-1">
        <div class="dropup" style="position: fixed; top: 200px">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                <li><a role="menuitem" href="#">Action</a></li>
                <li><a role="menuitem" href="#">Another lonnnnnnnnnnnnnn action</a></li>
                <li><a role="menuitem" href="#">Something else here</a></li>
                <li><a role="menuitem" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-11">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci enim architecto debitis saepe veritatis, nesciunt neque dolorem reprehenderit! Officiis, optio. Ipsum quisquam, ut, nemo cupiditate quaerat laudantium nostrum tempore reiciendis! Nisi molestias autem et, aliquid eligendi esse obcaecati aliquam, sed repellat hic qui, consequatur eum explicabo magnam error. Explicabo ex vitae laboriosam dolores molestiae animi, temporibus quam perspiciatis sint ea amet doloremque repudiandae magni placeat porro, delectus laudantium beatae facere, omnis quisquam hic! Eum sed qui laboriosam natus dolorem nam vel deserunt excepturi repellat vero odit sapiente optio fugit ratione, minima sequi facilis numquam, ullam hic quo. Nam, atque, voluptates!</p>
            </div>
        </div>
    </div>
</div>

When I run it, the dropdown is under the panel. How can I fix to the panel is under the dropdown button and dropdown menu items?

Answer 1

As i said you have to play with z-index

<div class="row" style="width: 500px">
    <div class="col-md-1">
        <div class="dropup" style="position: fixed; top: 200px; z-index: 9999; //add this z-index">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                <li><a role="menuitem" href="#">Action</a></li>
                <li><a role="menuitem" href="#">Another lonnnnnnnnnnnnnn action</a></li>
                <li><a role="menuitem" href="#">Something else here</a></li>
                <li><a role="menuitem" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-11">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci enim architecto debitis saepe veritatis, nesciunt neque dolorem reprehenderit! Officiis, optio. Ipsum quisquam, ut, nemo cupiditate quaerat laudantium nostrum tempore reiciendis! Nisi molestias autem et, aliquid eligendi esse obcaecati aliquam, sed repellat hic qui, consequatur eum explicabo magnam error. Explicabo ex vitae laboriosam dolores molestiae animi, temporibus quam perspiciatis sint ea amet doloremque repudiandae magni placeat porro, delectus laudantium beatae facere, omnis quisquam hic! Eum sed qui laboriosam natus dolorem nam vel deserunt excepturi repellat vero odit sapiente optio fugit ratione, minima sequi facilis numquam, ullam hic quo. Nam, atque, voluptates!</p>
            </div>
        </div>
    </div>
</div>

Where to change

<div class="dropup" style="position: fixed; top: 200px; z-index: 9999;">

DEMO HERE