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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3301閲覧

position 文字が重なってしまう

ooaai

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/02 13:20

クリックするとボタンがへこむようにするため、positionを使っています。
問題はなかったのですが、下に文字を入力するとボタンを押した際に被ってしまいます。
原因は何でしょうか。
イメージ説明
↓クリックすると
イメージ説明
※周りの点線は気にしないでください

html

1 <div class="middle-right"> 2 <h1>アカウント登録</h1> 3 <h2>簡単に登録できます。</h2> 4 <form action=""> 5 <input type="text" placeholder=""><input type="text" placeholder=""> 6 <br><input type="email" placeholder="携帯電話またはメールアドレス"> 7 <br><input type="passward" placeholder="パスワード"> 8 <br><label for="birthday" class="label">誕生日</label> 9 <br><select name="birthday"> 10 (省略) 11 <option value="birthday">2019年</option> 12  (省略) 13 </select> 14 <select name="birthday"> 15   (省略) 16 <option value="birthday" selected>6月</option> 17 (省略) 18 <select name="birthday"> 19   (省略) 20 <option value="birthday" selected>15日</option> 21    (省略) 22 <br><label for="sex" class="label">性別</label> 23 <br><input type="radio" name="sex" class="sex-item">女性 24 <input type="radio" name="sex" class="sex-item">男性 25 <input type="radio" name="sex" class="sex-item">カスタム 26 <div class="sidebar"> 27 <p>[アカウント登録]をクリックすることで、<a href="#">利用規約</a><a href="#">データに関するポリシー</a><a href="#">Cookieポリシー</a>に同意するものとします。サービスに関連してFacebookからSNS通知が届くことがありますが、これはいつでもオフに設定できます。</p> 28 登録">**<a href="#" class="btn"><input type="submit" value="アカウント</a>** 29 </form> 30 ** <h3>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></h3>** 31 </div> 32

CSS

1/* メイン 右*/ 2.middle-right { 3 float: right; 4 width: 45%; 5} 6.middle-right h1 { 7 font-size: 36px; 8 color: #333333; 9 margin: 0; 10 padding: 13px 0 5px; 11} 12.middle-right h2{ 13 font-weight: normal; 14 font-size: 19px; 15 color: #333333; 16 margin: 0; 17 padding-bottom: 13px; 18} 19form input { 20 height: 23px; 21 border-radius: 5px; 22 padding: 8px 10px; 23 margin-bottom: 10px; 24 font-size: 18px; 25 border: 1px #92b2d7 solid; 26 color: #9b9b9b; 27} 28input[type="text"] { 29 width: 185px; 30 margin-right: 0.5em; 31} 32input[type="email"] { 33 width: 400px; 34} 35input[type="passward"]{ 36 width: 400px; 37} 38input[type="radio"] { 39 font-size: 18px; 40 color: block; 41} 42select[name="birthday"] { 43 font-size: 13px; 44 padding: 5px; 45 border: 1px #92b2d7 solid; 46} 47.sex-item { 48 color: block; 49 font-size: 18px; 50} 51.label { 52 color: #91949b; 53 font-size: 16px; 54 font-weight: bold; 55 margin: 10px 0 5px; 56} 57.sidebar { 58 width: 330px; 59 margin: 0; 60 font-size: 11px; 61 color: #8f9093; 62} 63.sidebar a{ 64 color: #4967ad; 65} 66input[value="アカウント登録"] { 67 font-size: 19px; 68 color: white; 69 background: linear-gradient(#81b368,#62864b); 70 width: 194px; 71 height: 39px; 72 font-weight: bold; 73 padding: 5px 20px; 74 outline: none; 75} 76**.btn { 77 position: relative; 78}** 79**input[value="アカウント登録"]:hover { 80 background: linear-gradient(#81b368,#62864b); 81} 82input[value="アカウント登録"]:active { 83 background: linear-gradient(hsl(100, 46%, 69%),#62864b); 84 position: absolute; 85 top: 2px; 86 outline: none;** 87} 88**h3{ 89 font-size: 13px; 90 color: #666666; 91}** 92

長いですが念のため前の部分のHTML,CSSを一部載せています。

Facebookのログインページの模写コーディングをしています。
Facebook ログインページ→【https://ja-jp.facebook.com/】

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

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

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

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

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

-millmill-

2020/07/02 15:19

1. ソースに入っている ** は何でしょう? 2. 必要なタグ、閉じタグがあちこち抜けています。 このようなソースでは検証できません。 最低限の表示ができるよう もう一度ソースを整えてから質問して頂いた方が良いと思います
ooaai

2020/07/03 06:30

分かりやすいよう太字にしたかったのですが「**」が表示されてしまいました。 抜けてる部分、以後気をつけます。指摘ありがとうございます。
guest

回答1

0

ベストアンサー

原因は何でしょうか。

position:absoluteは、「絶対配置」と呼ばれ、後続の要素がその要素が存在しなかったかのようにふるまいます。
なので、「有名人、バンド、ビジネスのために……」という文字列がボタンがなかったかのように上に上がってかぶる、ということが起きています。


解決方法ですが、この目的であればposition:relative(相対配置)でいいのではありませんか?

投稿2020/07/03 02:07

Lhankor_Mhy

総合スコア36960

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

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

ooaai

2020/07/03 06:32

解決しました。absoluteとrelatuveは一緒に使わないといけないものだと変な解釈をしていたみたいですが調べたらそうではないみたいですね。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問