position:absoluteとz-indexを指定した要素 = A
その下の要素 = B
実装したいこと:Aの下にBが入り込まないようにしたい
問題:Aの要素の下にBの要素が入り込んでしまうためAにmargin-bottomを指定してみたのですが、なぜか添付画像のようにAの上にmarginが効いてしまい上手くレイアウトが取れません。Bに対してpaddingを指定してみたものの画面幅が変わると最終的にBがAの下に入り込んでしまいます。解決方法はありますでしょうか?
補足:Aの要素はスライドショーを実装する予定でposition:absoluteとz-indexの指定は外せないものとなっています。
.sliderが要素A、catchcopyが要素Bとなります
コード ```<div class="mainvisual"> <div class="slider"> <div class="slider_img"> <a href="#"><img src="img/slider/slider-0.png" alt=""></a> <a href="#"><img src="img/slider/slider-1.png" alt=""></a> <a href="#"><img src="img/slider/slider-2.png" alt=""></a> <a href="#"><img src="img/slider/slider-3.png" alt=""></a> <a href="#"><img src="img/slider/slider-4.png" alt=""></a> </div> </div> <h2 class="catchcopy">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h2> </div> ```ここに言語を入力 コード ```.mainvisual { margin-top: 48px; .slider { width: 100%; position: relative; .slider_img { width: 100%; position: relative; } } } .slider_img a{ display: block; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; &.active { z-index: 10; } img { width: 100%; } } .catchcopy { padding: 50vh 48px 10vh; font-size: 1.3rem; font-weight: normal; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/29 04:15
2022/06/29 04:23