position:fixedの要素にz-indexが効かない原因

###前提・実現したいこと
position:fixedで位置を固定している要素に
z-indexが効かない問題を解決したいです。

かなり前の記事に気になる記述がありましたが、こちらのバグはもう解消済みでしょうか。
またこちらのバグの内容はどのようなものでしょうか。
参考元：http://www.xml.vc/property/haiti/z-index.html

適用できる要素は、positionプロパティで指定できるstatic以外のabsolute、relative、fixed の値を指定できますがabsolute以外は‘position:relative’、‘position:fixed’のみを指定したときと同様のバグがあります。（バグがそのまま引き継がれる）

###発生している問題・エラーメッセージ
一番手前に位置を固定して表示しておきたいフローティングメニューの上に
z-indexを指定した別の要素が表示されてしまいます。

※実際のページではボタンはCSSでスライド切り替えができるようなボタンです。

###該当のソースコード
※質問するにあたり、一部改変しています。
不足している情報などありましたら、ご指摘をお願いします。

HTML
1<div id="wrapper">
2  <div id="navi">
3    <ul>
4      <li>メニュー</li>
5      <li>メニュー</li>
6      <li>メニュー</li>
7      <li>メニュー</li>
8    </ul>
9  </div>
10
11  <div id="link">
12    <div class="btn" style="position: relative; margin-bottom: 5px;" >
13      <input class="btn-input" type="radio" checked />
14      <label class="btn-label">りんご</label>
15
16      <input class="btn-input" type="radio" />
17      <label class="btn-label">バナナ</label>
18      <span class="btn-selection"></span>
19    </div>
20  </div>
21</div>

css
1.navi {
2  top: 0;
3  height: 60px;
4  left: 0;
5  position: fixed !important;
6  width: 100%;
7  z-index: 2;
8}
9
10.btn {
11  position: relative;
12}
13.btn-label {
14  position: relative;
15  z-index: 1;
16}
17.btn-input {
18  display: none;
19}
20.btn-selection {
21  position: absolute;
22  display: block;
23}