レスポンシブ対応のwebsiteを作ろうとしているのですが、分からないことが出てきたため、質問させていただきます。
下記の画像を見てもらえば、分かるとは思うのですが、上側のフォームの中に「ここに文章を入れます」を入れたいのですが、なぜか重ね合わすことができず困っています。
websiteで調べた結果、絶対位置、相対位置を利用したposition:absolute;,position:relative;が画像を文字を重ね合わせるのよいとありましたが、拡大表示した際、ずれてしまいます。
websiteのみの対応であればこの方法を用いても良いとは思うのでが、今回私はレスポンシブ対応にしたいため、この方法はベターではないと思いました。
拡大表示しても、ずれることがなく、画像と文字を一定の位置にキープするにはどうれば良いでしょうか?
大変恐縮ですが、お分かりになる方、ご回答いただけると幸いです。
よろしくお願いします。
念のため、ここに私のwebsiteのURLを添付させていただきます。
websiteのURL
HTML
<header> <ul> <li><a href="#"><img src="box img/header/header-left.gif" class="header-left" alt=""></a></li> <li><a href="#"><img src="box img/header/header-right.gif" class="header-right" alt="" align="right"></a></li> <li><a href="#"><img src="box img/header/logo.gif" class="logo" alt=""></a></li> <li><a href="#"><img src="box img/header/header-1.gif" class="header-1" alt=""></a></li> <li><a href="#"><img src="box img/header/header-2.gif" class="header-2" alt=""></a></li> <li><a href="#"><img src="box img/header/header-3.gif" class="header-3" alt=""></a></li> <li><a href="#"><img src="box img/header/header-4.gif" class="header-4" alt=""></a></li> </ul> <div style="text-align: center;"> <img src="box img/header/header-5.gif" class="header-5" alt=""> <div style="text-align: center;", "margin-top: -5em;"> <input id="text1" name="text1" type="text" placeholder="ここに文章を入れます。"> </div> </div> </header>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/22 06:23