Q&A
コードはマークダウンのcode機能を利用してご提示ください
右上に設定しているメニューボタンの優先順位（レイヤー？）が、内容のグレー背景部分（class="sum"）より低く、スクロールしたときに、メニューボタンが隠れてしまう。
class="sum"にz-index:-1;を設定してみたけど、うまく設定できず。
sum ulのposition: relative;、.soumu li:afterのposition: absolute;の設定が邪魔しているのかなと思ったのですが、解決策が分かりません。
すみませんが、どこをどのように直せばよいか、教えてください。
【CSS】
- {
margin: 0;
padding: 0;
color: #444;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
a:hover, a:focus {
text-decoration: none;
}
/* ========================================================== /
/ ここから下がメニューの設定 /
/ ========================================================== /
.top-menu {
height: 90px;
background: transparent;
padding: 0px 10px;
text-align: left;
}
.menu-btn_check {
display: none; /チェックするまで非表示/
}
menu {
position: fixed;
right: 10px;
top: 20px;
width: 90px;
height: 50px;
padding: 0px;
margin: 0px;
border-radius: 7px;
border: 3px solid #fff;
background: #001a00;
}
menu:hover, menu:focus {
background-color: #66cc00;
cursor: pointer;
}
menu::after { /メニューボタン内の三本線をつくる/
right: 0;
top: 11px; /menuﾎﾞﾀﾝ高さ50/2＝25、ﾌｫﾝﾄｻｲｽﾞ35/2＝14、25-14=11/
font-size: 35px;
font-weight: bold;
position: absolute;
z-index: 30;
content: '\2261'; /三本線/
padding: 0px;
color: #fff;
background: transparent;
}
.menu-btn_check:checked + menu::after {
content: '×'; /三本線から表示を変えた閉じるボタンをつくる/
}
.menu-p {
display: table-cell;
height: 50px;
width: 90px;
vertical-align: middle;
text-align: left;
color: #fff;
margin: 0px;
padding: 1px 7px;
font-size: 16px;
font-weight: bold;
transform: scaleY(1.5);
}
.menu-btn_check:checked + menu {
/ 隠しメニューを表示時のメニューの設定 /
z-index: 20;
cursor: pointer;
}
.menu-btn_check:checked + menu + div.overlay {
/ 隠しメニューが表示されているときに画面全体を覆うブロックを表示。
これでメニュー部分（z-index : 20;）を除いて
画面全体がチェックボックス（メニューボタンエリア）をクリックすることに
なるため、メニュー以外の部分をクリックするとメニューが閉じるという仕組み*/
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.7); /末尾0.7で半透明の指示/
}
.menu-btn_check:checked + menu .menu_list {
display: block;
overflow: scroll; /メニューが見切れた時（縦）にスクロールバーを表示/
}
menu .menu_list {
position: absolute;
padding: 0px;
margin: 0px;
top: 60px;
right: 0;
display: none;
overflow: scroll; /メニューが見切れた時（縦）にスクロールバーを表示/
}
.menu_list li {
background: #fff;
border-top: 1px solid #999;
margin: 0px;
padding: 5px 22px 5px 40px;
min-width: 105px;
max-width: 350px;
white-space: nowrap;
text-overflow: ellipsis; /内容が長い場合、省略記号”･･･”を表示/
}
.menu_list li:last-child {
border-bottom: 1px solid #999;
}
.menu_list li a {
display: block;
color: #333;
padding: 0px 10px;
}
.menu_list li a:hover, .menu_list li a:focus {
background: #deffc2;
}
.menu_list li ul li {
border-top: none;
margin: 0px;
padding: 0px;
}
.menu_list li ul li:last-child {
border-bottom: none;
}
/* ========================================================== /
/ ここから下が内容の設定 /
/ ========================================================== */
.sum00 img {
margin: 0 0 0 auto;
}
.sum {
margin-top: -40px;
margin-left: 0px;
width: 100%;
}
.sum a {
display: block;
}
.sum span {
font-weight: bold;
background: linear-gradient(transparent 50%, #b6fa43 10%);
}
.sum ul {
background-color: #edeff3;
padding: 0.5em;
position: relative;
margin-top: 60px;
}
.sum ul:first-of-type {
margin-top: 40px;
}
.sum ul li {
padding: 5px 10px;
text-align: left;
border-bottom: dashed 1px #666;
}
.sum ul li:last-of-type {
border-bottom: none; /最後のliの点線なし/
}
.sum p {
margin: 5px 0px;
}
.soumu li:after {
/タイトルタブ/
background: #006600;
color: #fff;
font-weight: bold;
position: absolute; /sum ulとの位置関係/
left: 0px;
bottom: 100%;
padding: 5px 20px;
letter-spacing: 0.5em;
}
.soumu li:after {
content: "総務課"; /タブの文字/
font-family: "メイリオ";
}
【html】
<!-- メニュー部分ここから --> <header> <section> <article class="top-menu"> <label for="menu-btn"> <input id="menu-btn" type="checkbox" class="menu-btn_check"> <menu><p class="menu-p">MENU</p> <ul class="menu_list"> <li> <img src="" width="35" height="35" alt=""/>HOME <ul> <li><a href="#">本店</a></li> <li><a href="#">〇〇支店</a></li> <li><a href="#">〇〇支店</a></li> </ul> </li> </ul> </menu> <div class="overlay"></div> </label> </article> </section> </header> <!-- 内容ここから --> <main></main><section> <article> <div class="sum00 mt-10"> <img src="" width="75" height="75" alt=""/> <article class="sum"> <ul class="soumu"> <li><span class="sum-span">〇〇〇〇〇〇〇〇</span> <p>〇〇〇〇〇×〇〇×〇〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇<br>〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇 </p> </li> <li><span class="sum-span">〇〇〇〇〇〇</span> <p>〇〇〇〇〇〇〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇<br>〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇<br>〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇×〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇<br>〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇〇〇〇×〇〇×〇〇</p> </li> </ul> </article> </div> </article> </section>
m.ts10806さま
すみません、初心者で・・・
質問の投稿のしかたですよね・・・
マークダウンのcode機能の意味がわかっていないので、そこからお勉強します・・・
すみません。。。
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Kei344さま
ご教授くださりありがとうございます！
サイト内調べれば下記のような質問が出てくるかと思います。
https://teratail.com/questions/238564
既にコメントにあるように質問は編集できます。いつくるかわからない「今後」では忘れるので、この質問から対応しておいてください
回答1件
0
ベストアンサー
menuにz-indexを設定すればいかとおもいますが。
css
1menu { 2 position: fixed; 3 right: 10px; 4 top: 20px; 5 width: 90px; 6 height: 50px; 7 padding: 0px; 8 margin: 0px; 9 border-radius: 7px; 10 border: 3px solid #fff; 11 background: #001a00; 12 z-index: 1; /* 追加 */ 13}
おまけ
z-index が想定通りにいかないときは、下記を参考にすると大抵解決します。
投稿2020/08/23 00:38
編集2020/08/23 00:40
総合スコア34053
ありがとうございます！思い通りのことができました。
ずっとclass="sum"への指示ばかりを考えていたので、、、これだけで解決して嬉しいです。
本当にありがとうございました。
あなたの回答
tips
プレビュー
