expandable-menuよりtitleボタンが上に来てしまう問題を修正したい

https://gyazo.com/0f83c00e4ec4d63e62dabec8ebc8472d

正式名称がわからなかったのでclass名で書いた

code:project-home.css

.quick-launch .project-home {

/* 省略 */

z-index: 1000;

}

これは.navbarのz-indexがデフォルトで1000に設定されているため

code:navbar.css

.navbar {

z-index: 1000;

/* 省略 */

}

けれど、もう既にデフォルトでそう設定されている

code:expandable.css

.expandable-menu {

/* 省略 */

z-index: 1001;

}

なのでどこが原因なのかわからない

ざっと調べた感じ、そんなことはないっぽい

そもそもの話、どう見ても井戸端ボタンの方が上に表示されている

https://gyazo.com/fa4bdd9f9e7643ec93f1653aa0812143

子要素は親要素のレイヤーを引き継ぎ、それを超えることはできない説

この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。

z-index の解決は同じレベル間で行われ、その下のレベル(子要素)は上のレベル(親要素)の重ね合わせの結果に従うことになります。

wogikaze.icon

とりあえずホームに戻るボタンを上に固定するのが想定されてないから起きている

対処法：page-menuの最大幅を狭めてmenuに被らないようにしたうえで,横にスクロールできるようにする

60+13+108 = 181

code:style.css

.expandable-menu {

max-width:calc(100% - 181px);

}

https://gyazo.com/6308ade9f56ecc5ce415522a3d292938

こうか？

スマホ表示のときだけ日付を消して井戸端ボタンの当たり判定を狭くするのもアリ

テスト

https://gyazo.com/fe9e6a5692b5a4d94ec019864deee05e

完成

パラメタ解説

これを参考に値をいじれば、各自のprojectでも使える

code:css

.expandable-menu {

max-width: calc(100% - 186px); /* 126 + 60 */

}

@media screen and (min-width: 768px) and (max-width: 991px) {

.expandable-menu {

max-width: calc(100% - 201px); /* 126 + 60 + 15 */

}

}

@media screen and (min-width: 992px) and (max-width: 1260px) {

.expandable-menu {

max-width: calc(100% - 216px); /* 126 + 60 30 */

}

}

行移動めっちゃ便利

このUserCSSとは関係なく

下のnavbarにあるボタンが反応してしまう