I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.

container item position: relative; z-index: 1; dropdown-menu position: absolute; z-index: 10000;

I also did test btn-group with a higher z-index and it did not work.

Here is a working fiddle /

I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.

container item position: relative; z-index: 1; dropdown-menu position: absolute; z-index: 10000;

I also did test btn-group with a higher z-index and it did not work.

Here is a working fiddle http://jsfiddle/sGem8/

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Can you create a fiddle for it. We can't say anything by just looking at the image.. – Vishal Khode Commented Apr 17, 2014 at 6:21
• Will do. Will post it in a moment. Thanks for the reply. – tarokins Commented Apr 17, 2014 at 6:28
• Hi @VishalKhode, here is the working fiddle. jsfiddle/sGem8 – tarokins Commented Apr 17, 2014 at 6:43
• Now I know why this didn't work. Tried taking out the z-index property but still. This div is contained by jQueryUI draggable property and forces the div to get a z-index of 0. I don't want to hack it. It may destroy some properties linked to it. I just repositioned the button somewhere else. So much for this headache. Thanks again! – tarokins Commented Apr 17, 2014 at 7:39
• stackoverflow./a/28212815/1166597 – OldTrain Commented Jan 29, 2015 at 10:53

3 Answers 3

You don't need to add z-index property.. Simply remove it and it will work..
i.e.

#container > li {
  display: block;
  border-radius: 3px;
  position: relative;
  padding: 15px;
  background: #ecf0f1;
  margin-bottom: 15px;
}

Working Fiddle

I have faced the same issue. Inside the main container which had all the nav-items, I had every outermost div items as position: relative Only the dropdown menu had position: absolute

To make the dropdown appear above all items, add

.dropdown{
position: absolute;
z-index : 999; //some high value
}

and other items in the container have

.outer-divs{
position: relative;  
z-index: 1; //some low value
}

If you still find your dropdown to behave not as expected, try setting the div item that opens the dropdown when clicked to

.dropdown-container{
position  :static;
}

Most people will find the last trick to be the most valuable. Hope this helps.

Modify the below css in your styles

#container > li {
 display: block;
 border-radius: 3px;
 position: relative;
 /* z-index: 0; */
 padding: 15px;
 background: #ecf0f1;
 margin-bottom: 15px;
}