Oct 30, 2014 at 10:57 PM
Hi I am using Bootstrap 3 in Sharepoint 2013. And I have two issues that are pretty strange.
  1. The z-index of the menu and footer is to high, and I am not finding a way to put it down, and the drop down menu of shp list is not visible, beacuse is under the menu and footer.
  1. The modal is not positioning in the middle of the page, the position of y is at the top and not in the middle.

This example is kind of hard, beacuse the button that opens the modal is at the bottom, and the modal is appearing at the top, not in the middle of the browser.

I appreciate any help guys.
Nov 14, 2014 at 6:54 PM
I had this problem until I removed the overflow:hidden from my #main id. I also set the z-index of .navbar to 50 (it is set to 1000 in bootstrap.css)

Hope this helps.
Nov 17, 2014 at 8:20 PM

That is a good point, the navbar class we are bringing over from Bootstrap really doesn't need such a high z-index. Almost all content that a nav dropdown should appear on top of will have a very low z-index, which hover panels that the like should already be over 50. Thank you for the suggestion.

Nov 26, 2014 at 2:59 AM
I have experienced similar with the ribbon dropdown row that holds the WYSIWYG editing panel.

No z-index change prevents this from overlapping the Webpart Tool Panel if I assign it top right position.

However when I set my Welcome and System menus to higher z-index, they fortunately are "on-top" (as they are out of the box).

Is there something special about the SP2013 ribbon and z-index that interferes with custom positioning in our master pages?
Nov 27, 2014 at 12:02 AM
z-indexing always seems to be a pain and can also depend on the browser still.

Since the SP 2013 suite bar (including ribbon) are outside of the s4-workspace, overlap in general can be an issue. I do not know of a good cure-all, I have to see the problem and play around with the z-index to find fixes depending on parent containers display properties and such.