:checkedを使用してフローティングバナーを閉じたい

Question

実現したいこと

• フローティングバナーを閉じる
• 重なっているimgを削除したい

前提

HTMLとCSSでフローティングバナーを作成しようとしています。
左下に画像の固定、×ボタンの実装まではできたものの画像を非表示にすることができません。
javaはまだ勉強していないので可能ならば:checkedを使用して、×ボタン押下→画像非表示を実現したいです。
コードに誤りがあるか見ていただけますと幸いです。

(3/29追記)
:checked実行後、画像が後ろに回り込みます。もしくは何かしらの原因で後ろにももう一枚画像が重なって表示されていたものが出現します。
確認はgoogleのデベロッパーツールで行っています。

該当のソースコード（HTML）（3/29更新）

<div class="taikenbatu">
　<input type="checkbox" id="batu">
　<div class="taikenbn">
　　<a href="html/taiken.html"><img src="images/taiken.png" alt=""></a>
　</div>
　<label for="batu">
　　<span class="batu"></span>
　</label>
</div>

該当のソースコード（CSS）（3/29更新）

.taikenbn{
    padding: 0;
    margin: 80px auto 30px auto;
    text-align: center;
}

.taikenbn img{
    width: 30%;
    height: auto;
    margin: 0 auto;
}

.batu{
    display: none;
}

.taikenbatu{
    position: relative;
    z-index: 999;
}

.taikenbn{
    position: fixed;
    text-align: left;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.taikenbn img{
    width: 40vw;
    height: auto;
    margin: 0 auto;
}

.batu{
    display: inline-block;
    width: 8vw;
    height: 8vw;
    position: fixed;
    bottom: 19vw;
    left: 0.5vw;
    padding: 0;
    margin: 0;
    z-index: 999;
    background-color: #fff;
    border-radius: 8vw;
}

.batu::before, .batu::after { /* 共通設定 */
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 5vw; /* 棒の高さ */
    background: #333;
    border-radius: 3px;
}
   
.batu::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
   
.batu::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.taikenbatu input[type="checkbox"]{
    display: block;
    width: 8vw;
    height: 8vw;
    position: fixed;
    bottom: 0;
    right: 0;
}

.taikenbatu input[type="checkbox"]:checked ~ label{
    display: none;
}

.taikenbatu input[type="checkbox"]:checked ~ .taikenbn{
    display: none;
}

試したこと

①id=taikenbnの付与をimgにしてみた
→変わらず
②コードの順番を書き換えてみた
→変わらず
③mobile.CSSの68行目に!importantを追加
→変わらず

補足情報（FW/ツールのバージョンなど）

・visual studio codeを使用してローカル環境で作成中
・PCファーストで作成したものをスマートフォン対応させるために作成（PC用SP用で別のCSSを読み込ませる）

Answer 1

フローティングバナーを閉じるコードは該当コード（3/29更新）通りで正解でした。

画像が消えない原因はHTMLの別箇所に同じコードが記載されていたためでした。そこを削除することで目標の通り実装できました。

ご協力くださった皆さまありがとうございました。

Answer 2

見た感じ、バツ印を押すと消える部分は実装できていそうです！僕の環境では問題なく実行できています。
ただ、画像が重なっていてクリックできないのではないでしょうか。

たとえば画像部分の CSS を以下のように変更して、もう一度バツ印を押してみてください。

.taikenbn img{
    height: 1rem;
    margin: 0 auto;
}

これはちょっと小さすぎますが、バツ印が動作するかの確認はできると思います。

動作環境

https://codepen.io/yotu-shigure/pen/MWRmwvz

Comments

[0murice7]

お返事遅くなりすみません。ご回答くださりありがとうございます。

×マークを押してチェックボックスにマークが入ることはこちらでも確認できております。
伝わりにくい文章で申し訳ありません。

ほかの方のアドバイスにより×マークの非表示も解決したのですが、画像の非表示には成功しておりません。
何かわかることありましたら教えていただけますと幸いです。

Answer 3

順番を入れ替えてみては？

<div class="taikenbatu">
　<input type="checkbox" id="batu">
　<div class="taikenbn" id="taikenbn">
　　<a href="html/taiken.html"><img src="images/taiken.png" alt=""></a>
　</div>
　<label for="batu">
　　<span class="batu"></span>
　</label>
</div>

Comments

[0murice7]

回答ありがとうございます。試してみましたが解決できませんでした。

なぜか×マークは消えたのですが、画像が非表示になりませんでした。

この場合どの辺りに原因がありそうでしょうか？

Answer 4

z-index の設定が間違ってますね。

z-index は兄弟要素間でのz方向の位置(重なり)を指定します。
つまり、同じブロック内の要素の重なりを操作します。
別のブロックに含まれる要素間では重なりを操作できません。
まずは、これを理解しましょう。

現状は、×ボタン(.batu)の全面に.taikenbnが覆いかぶさっているので、×ボタンをクリックできない状態です

.taikenbnと兄弟要素である.batuの親要素のlabelにz-index を設定すれば前面にきてクリックできるようになります。

/* 下記追加 */
.taikenbatu label{
  position: relative;
  z-index: 999;
}
/* ここまで */

.taikenbn{
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    text-align: left;
 /*   z-index: 999; 削除*/
}

Comments

[0murice7]

回答ありがとうございます。試してみましたが解決できませんでした。

クリックできているかを確認するために右下にチェックボックスを表示しているのですが、該当コードのままでも×マーク押下で右下チェックボックスにチェックは入る状態です。それとはまた別の状況を作る必要があるということでしょうか？

ご教授いただいたとおりにコードを書き換えてみたのですが、現状と変化ありませんでした。

この場合どの辺りに原因がありそうでしょうか？

[hatena19]

質問のHTMLならこの回答の修正で#taikenbnの表示/非表示を切り替えられます。
下記サンプルで確認できます。

https://codepen.io/hatena19/pen/NWmjYpe

提示されていない他の部分に原因があるのでしょう。

[0murice7]

お返事遅くなりすみません。再びコメントありがとうございます。

たしかに上記サンプルで動作確認できました。
おっしゃる通り、ほかの部分に原因があるのかもしれません。

アドバイスくださりありがとうございます。