要素が重なってしまい困っています

実現したいこと

要素を重ならないように表示したいです。

下記のように２つのエリアで上下に表示しようと思っています。

実現したいことは、

タグ内の「ファイル情報」というテキストが、 の要素の上に重なってしまうので、重ならないようにしたいです。

発生している問題・分からないこと

のCSSの設定が問題かと思いますが、どのように修正したら要素の重なりを防げるでしょうか？

該当のソースコード

CSS

1@charset "UTF-8";2 3.space {4 padding-bottom: 20px;5}6 7.w-space {8 padding-left: 180px;9}10 11.filePublish {12 position: relative;13 width: 990px;14 padding-left: 40px; 15 padding-top: 10px;16}17 18.fileInfo {19 position: relative;20 margin-top: auto;21 top: 0;22}23 24p {25 padding-bottom: 10px;26}27 28.itemTitleRequired {29 font-weight: 500;30 font-size: 14px;31 margin-top: 10px;32 position: relative;33}34 35.required{ 36 margin-left: 10px;37 position: absolute;38}39 40.categoryTitle {41 position: absolute;42 width: 310px;43 height: 50px;44 left: 40px;45 top: 40px;46 47 background: #D90013;48 border-radius: 8px 8px 0px 0px;49 cursor:pointer;50}51 52.categoryArea {53 box-sizing: border-box;54 55 position: absolute;56 width: 310px;57 height: fit-content;58 left: 40px;59 top: 80px;60 61 background: #FFFFFF;62 border: 10px solid #D90013;63 border-radius: 0px 0px 8px 8px64}65 66.publishTitle {67 position: absolute;68 left: 15px;69 top: 10px;70 71 font-style: normal;72 font-weight: 700;73 font-size: 20px;74 line-height: 150%;75 76 color: #FFFFFF;77}78 79.chkPublish {80 /* ✔ */81 position: absolute;82 width: 38px;83 height: 36px;84 left:265px;85 top: 7px;86 z-index: 1;87 88 font-family: 'Noto Serif Bengali';89 font-style: normal;90 font-weight: 500;91 font-size: 36px;92 line-height: 150%;93 display: flex;94 align-items: center;95 96 color: #000000;97}98 99.chkPublishArea {100 box-sizing: border-box;101 102 position: absolute;103 width: 38px;104 height: 36px;105 left: 260px;106 top: 7px;107 108 background: #FFFFFF;109 border: 1px solid #E0E0E0;110}111 112.inputPublish {113 box-sizing: border-box;114 padding: 12px 16px;115 116 width: 286px;117 height: 46px;118 margin: 2px;119 120 background: #FFFFFF;121 border: 1px solid #E0E0E0;122 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);123 border-radius: 8px;124 125 flex: none;126 order: 0;127 flex-grow: 0;128}

HTML

1 <div class="filePublish"> 2 <p> 3 <span class="itemTitleRequired" th:text="#{label.publish}">掲載</span> 4 <span class="required"><img th:src="@{/img/required.png}" width="39px" height="21px"></span> 5 </p> 6 <p class="space"> 7 <div id="category"> 8 <span class="categoryTitle"> 9 <span class="publishTitle" th:text="#{label.category}">カテゴリ</span> 10 <span class="chkPublishArea"></span><span class="chkPublish">✔</span> 11 <input type="hidden" name="categoryChk" value="1" /> 12 </span> 13 <span class="categoryArea"> 14 <input type="text" class="inputPublish" /> 15 <input type="text" class="inputPublish" /> 16 <span class="w-space"><input type="button" th:value="#{button.add}" class="btnAdd" /></span> 17 </span> 18 </div> 19 20 </p> 21 </div> 22 <div class="fileInfo"> 23 <p> 24 <span class="itemTitleRequired" th:text="#{label.file.information}">ファイル情報</span> 25 <span class="required"><img th:src="@{/img/required.png}" width="39px" height="21px"></span> 26 </p> 27 </div>

試したこと・調べたこと

上記の詳細・結果

HTMLコーディングが初めてでいろいろ調べたのですが、
position: の扱い方の問題なのかなと思いましたが、いろいろ変更してもうまくいきませんでした。
よろしくお願いいたします。

補足

特になし