親position: fixedの子要素にz-indexを効かせる

画面下にfixedで固定しているナビにintro.jsでガイドを付ける際にz-indexで子要素のみをハイライトしたいが、子要素のz-indexが効かない

html
1<div class="footer_nav">
2  <div id="nav1" class="nav">HOME</div>
3  <div id="nav2" class="nav">PAGE1</div>
4  <div id="nav3" class="nav">PAGE2</div>
5  <div id="nav4" class="nav">PAGE3</div>
6</div>
7<script type="text/javascript" src="./intro.js"></script>
8<script>
9window.onload = windowIntro;
10function windowIntro(){
11    var intro = introJs();
12    intro.setOptions({
13      steps: [
14        {
15          element: '#nav1',
16          intro: "説明１",
17          position: 'top',
18        },{
19          element: '#navi2',
20          intro: "説明２",
21          position: 'top',
22        },{
23          element: '#nav3',
24          intro: '説明３',
25          position: 'top'
26        },{
27          element: '#nav4',
28          intro: "説明４",
29          position: 'top'
30        },{
31          element: '#nav5',
32          intro: '説明５',
33          position: 'top'
34        }
35      ]
36    });
37    intro.start();
38}
39</script>

css
1  .footer_nav {
2    display: flex;
3    background: #eee;
4    position: fixed;
5    bottom: 0;
6    left: 0;
7    right: 0;
8    height: 50px;
9}
10.nav {
11  width: 100%
12  text-align: center;
13}

intro.js
https://github.com/usablica/intro.js/blob/master/intro.js

yoshinavi

2019/01/11 08:06

該当コードを提示してください。

ya_suhn

2019/01/15 00:08

提示しました。なにか分かりましたでしょうか？

yoshinavi

2019/01/15 03:20

一部「#nav2」が「#navi2」と誤記述がありますが、基本的には提示コードでハイライトされています。どこがどう問題ですか？

yoshinavi

2019/01/15 03:27

キチンと「intro.js」と「introjs.css」は読み込まれていますか？

ya_suhn

2019/01/15 07:31

yoshinaviさんお返事ありがとうございます。誤記述、申し訳ないです。 intro.js/intro.cssの読み込みは確認済みです。私の画面では、ハイライトされた際にハイライトの <div class="introjs-helperLayer introjs-fixedTooltip" style="width: 103.75px; height: 60px; top: 612px; left: -5px;"></div> この部分が上部に来てしまい <div id="nav1" class="nav">HOME</div>こっちの内容が隠れてしまう状態です。

行動規範の内容に同意します

回答3件

自己解決

解決できませんでした。

投稿2019/02/12 05:58

ya_suhn

総合スコア25

簡単な確認しかしていませんが、この問題の解決策が挙げられています。
https://github.com/usablica/intro.js/issues/109#issuecomment-365277501

CSS
1    .introjs-helperLayer {
2        background: transparent;
3    }
4
5    .introjs-overlay {
6        display: none;
7    }
8
9    .introjs-helperLayer:before {
10        opacity: 0;
11        content: '';
12        position: fixed;
13        width: inherit;
14        height: inherit;
15        border-radius: 0.5em;
16        border: .2em solid rgba(255, 217, 68, 0.8);
17        box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
18        opacity: 1;
19    }
20
21    .introjs-helperLayer:after {
22        content: '';
23        left: 0;
24        right: 0;
25        top: 0;
26        bottom: 0;
27        position: fixed;
28        z-index: 1000;
29    }