質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

181閲覧

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

questKoba

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2024/06/19 06:45

実現したいこと

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

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

<div class="filePublish"> <div class="fileInfo">

実現したいことは、

<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: の扱い方の問題なのかなと思いましたが、いろいろ変更してもうまくいきませんでした。
よろしくお願いいたします。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2024/06/19 07:09

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

回答1

0

ベストアンサー

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

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

総合スコア36410

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

questKoba

2024/06/19 07:31

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

2024/06/19 07:59 編集

そうですね。position:absolute をやめない場合は、JavaScriptなどで高さを計測して動的に変動させる必要があると思います。
questKoba

2024/06/19 09:04

ご回答ありがとうございます。 position:absolute の使用をやめた他の方法で試してみます。 ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問