[Bootstrap]ドロップダウンメニューが隠れて表示されない問題

記事の概要

　bootstrapでドロップダウンメニューを実装していたところ、他のブロック要素の下に埋もれてしまいうまく表示されないことがあった。　下図のように解決できました。

解決前：　ユーザーメニューをドロップダウンで実装したところ、メニューの一部が他のブロックの下に埋もれてしまった。

解決後：　うまく表示された。

原因と解決

　他のブロック要素が存在し、それがposition:fixedなどpositionで位置決めされている場合に起こるようだ。dropdownが所属する要素の階層が、他のブロック要素より下にあると、このように隠れてしまう。 z-indexで階層の指定を考慮し、dropdownメニューを上に持ってくることで解決できた。

.dropdownが所属するブロック要素{
  position: fixed;
  z-index: 2;
}

.他のブロック要素{
  position:fixed;
  z-index: 1;
}