Q&A
ご提示のコードを試してみましたが、問題なくボタンの画像が上になりました。
ここに書かれていないコードに原因があると思います。
コーディングについて初心者での質問で…失礼いたします。
①背景画像(cta）の上にボタン画像（botton）を指定の位置に設置したいのですが…どうしてもできません。
背景画像の下に配置されてしまいます。
relative,absoluteを使用するのはわかったのですが…設置されません。
②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。
HTMLで<body></body>の間に＜center＞</center＞を使用して中央揃えにするのは間違っていますか？
初心者でよくわかっていませんが…教えて頂ける方よろしくお願いいたします。
★出来上がりイメージ
★背景画像ーcta
★ボタンーbotton
★HTML
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="cva"> <div class="cta"> <p> <img src="img/cta.jpg"alt> </p> </div> <div class="botton"> <a href="https://www.google.com/"target="_blank"> <p> <img src="img/botton.png"alt> </p> </a> </div> </div> </body> </html>
★style.css
body { width: 100%; background-color: #fff; } .wrapper { max-width: 750px; margin: 0 auto; text-align: center; } .cta { margin-top: -5px; } img { width: 100%; margin: 0; } /*これをrelativeにしないとbuttonがどこを基準にして移動したらいいかわからない*/ .cva { position: relative; } .cva .botton { position:absolute; bottom: 18%; left: 0; right: 0; margin: auto; } .cva .botton img{ max-width: 90%; }
返信ありがとうございます。
コードをそのままコピペしているのですが…ボタンが背景画像の下に設置されます。
他の原因が何かわかりません。
本当にご提示いただいたコードそっくりそのままコピペであるならば、CSSを読み込んでいないと思います。
さすがにそれはないだろうと思ったので、当方で確認した時にはstyle要素を追加しましたが、どうでしょうか。
Lhankor_Mhyさん
ご丁寧な対応ありがとうございます！！
htmlに下記のコードを入れたら反映されました！！
<link rel="stylesheet" href="style.css">
すごく初心者なのですごく勉強になりました。ありがとうございます＾＾
ご解決されたようで何よりです。
回答1件
1
ベストアンサー
①背景画像(cta）の上にボタン画像（botton）を指定の位置に設置したいのですが…どうしてもできません。
提示のコードで指定位置(下から18％)に表示されています。提示されていない部分に原因があるのでは。
②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。
提示のHTMLにはCSSにあるwrapperクラスの要素がないので、全体をwrapperクラスで囲んだら中央に配置されます。
また、botton 内の画像が左端になるので、これは、.botton にtext-align: center; を設定すれば中央配置になります。
下記にサンプルを置いておきますので確認ください。
投稿2023/05/30 04:49
総合スコア33106
回答へのコメント
hatena19さん
返信ありがとうございます。すごく初心者なので丁寧なコードすごく参考になりました。
全部中央に揃いました。ありがとうございました。
CSSが反映されていないことがわかりました。すごく勉強になりました。
あなたの回答
tips
プレビュー
