twitter bootstrap dropdown popping under elements

Question

You can see in this screenshot, the menu containing \"hi\" on each line is popping under body elements and also under a button on the screen.

Answer 1

Using answers posted here I did the following....On my _Layout.cshtml I added

style="position: relative; z-index: 999;" to my container body-content div (just before RenderBody()) so it looks like this:

<div class="container body-content" style="position: relative; z-index: 999; ">
        @RenderBody()

Answer 2

Add css to parent element

overflow:visible;

Answer 3

It's a z-index problem.

Make sure that the navbar is higher then the rest of the elements.

Answer 4

I found my similar issue was due to opacity on a parent element being set to below 1.

Answer 5

True, as arnirpc proposed the

-webkit-transform: translate3d(0, 0, 0);

does this trouble. But I had to use this because of Bootstrap Dynamic Pills and Tabs also with dropdown. Seen here: Pills with dropdowns

So removing the translate would shift the dropdown box above the button of Dropdown - and thats what you do not want.

But the dropdown of Bootstrap 4 pills is defaultly not even working since the dropdown is hiding behind the TAB-Content and does not matter if its a H1, text or image.

So I tried the z-index thing on many things of the content the LI, UL, container etc. Nothing.

Soltion for me: in this case it was just putting a z-index-minus-1 (or any class with z-index: -1) on the inner content.

<div class="tab-content" id="pills-tabContent">
        <div class="tab-pane p-3 fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

            <div class="row">
                <div class="col-sm-4 z-index-minus-1"> <!-- HERE -->

Answer 6

I ran into a similar problem. I was able to fix it by removing the 'collapse' class from the nav-collapse element.

I didn't really look further into the problem but that fixed it for me.