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

実現したいこと

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

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

実現したいことは、

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

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

<div class="filePublish"> <div class="fileInfo"> の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 8px
64}
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>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

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

補足

特になし

yambejp

2024/06/19 07:09

なにをしたときにどうしたいかもう少し明確にした方がよいでしょう

行動規範の内容に同意します

回答1件

ベストアンサー

アドホックですが、こうするとどうでしょうか。

css
1.filePublish {
2    position: relative;
3    width: 990px;
4    padding-left: 40px;
5    padding-top: 10px;
6    height: 232px; /* これ */
7}

根本的な解決にはposition:absoluteをやめた方がいいでしょう。

投稿2024/06/19 07:06

Lhankor_Mhy

総合スコア36806

questKoba

2024/06/19 07:31

ご回答ありがとうございます。 position:absoluteをやめた方がいいのですね。 height: 232px;を追加してみました。確かに下に移動しました。申し訳ありません。問題に追記するのを忘れていたのですが、 <input type="text" class="inputPublish" />の入力エリアが可変になります。最大１０件縦に並ぶ予定です。最小で０件です。その場合、position:absoluteを利用していると難しいでしょうか？