前提・実現したいこと
WEBアプリのデザインを作成しています。
以下のtop-containerクラスの下にusage-containerクラスを配置したいです。
直下ではなく、2つが重なってしまうため、原因を教えてください。
pcサイズによってサイズを変更したいので、各クラスの位置を固定しない形で調整したいです。
top-container:キャッチコピー、リスト(aaa,bbb,ccc)
usage-container:赤塗り潰し部分(あああああああああああ......)
→リスト要素の一部が下の要素に重なってしまう。
HTML
1 <div class="top-container"> 2 <h2 class="top-messageA"> 3 キャッチコピー 4 </h2> 5 <div class="top-main"> 6 <ul class="top-messageB"> 7 <li>aaa</li> 8 <br> 9 <li>bbb</li> 10 <br> 11 <li>ccc</li> 12 </ul> 13 <ul class="top-messageC"> 14 <li>aaa</li> 15 <br> 16 <li>bbb</li> 17 <br> 18 <li>ccc</li> 19 </ul> 20 </div> 21 </div> 22 <div class="usage-container"> 23 あああああああああああああ 24 <br> 25 あああああああああああああああ 26 <div class="usageA"> 27 28 </div> 29 </div>
CSS
1.top-container{ 2 margin-top : 50px; 3 position: relative; 4 background-color: #ddd; 5} 6.top-main{ 7 padding: 200px 0 100px; 8 text-align: center; 9 height: auto; 10} 11.top-messageA{ 12 position: center; 13 font-size: 70px; 14 font-weight: 500; 15} 16 17.top-messageB { 18 font-size: 30px; 19 margin-left: 20%; 20} 21.top-messageC { 22 font-size: 30px; 23 margin-right: 20%; 24} 25.top-messageB ul{ 26 background: rgba(255,255,255,0.8); 27} 28.top-messageC { 29 font-size: 30px; 30 margin-right: 20%; 31 float: right; 32} 33.usage-container{ 34 background-color: red; 35} 36
試したこと
divの囲み方からpositionまでかなり色々試しましたが、上手くいきませんでした。