ヘッダー(header)を最前面に表示するz-index

プルダウン式のheaderを作っていたのですが、
おいおいおい、なんだこれは、ヘッダーよりもstepのボックスの方が全面に表示されているじゃないか。
ピッツバーグ美術館に飾られているモダンアートみたいになってるぞ。

ヘッダーのプルダウンを最前面に表示したいとき。

cssでz-indexを指定する

mozillaを見てみましょう。
Z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

z-indexの値が大きい方が全面に表示されます。下記例だとgoldが最前面です。

では実際にやってみましょう。
stepの該当箇所　z-indexの値を0にします。

.step {
  list-style-type: none;
  display:table;
  width:100%;
  height:50px;
  padding: 0;
  margin: 0;
  overflow:hidden;
  z-index: 0;
}

navigationのcss, z-indexを1にします。

#gNav {
	position: absolute;
	margin-top: 40px;
	float: left;
	width: 100%;
	height:45px;
	background-color: #6a5acd;
	z-index: 1;
}

おいおい、沖縄みたいに浮いてるぞ。

stepを全てz-index:0に変えます。

li.is-current{
	z-index:0;
}

上手く表示されるようになりました。