Q&A
ご回答ありがとうございます！
親要素relativeの認識が間違っておりました。
無知なものの質問にお答えいただき、ありがとうございます。
前提・実現したいこと
タイトル通り、”Position:relative & absolute” で重ねた要素を別の要素に重ねたりしたいのですが、可能でしょうか？
今回、HP作成をしており、画像の上にリンクを載せようとしております。
しかし、リンクが三つあり、それらをまとめた要素を画像の要素に重ねれず、困っております。
何度か他の事を作っているときに Position:relative;した親要素を他の親要素にposition:absolute;出来ないのかなと思って質問させていただきました。
あと、お時間が許す用であれば、こちらのHP作成の至らぬ点を教えていただきたいです。（画像の最下部にリンクを載せようとしております。しかし、ウィンドウサイズによって文字の位置が移動するため、画像のmin-widthで幅を指定し、それに合わせて位置を固定したいと思っています。）
初心者で、質問内容が不足しているかもしれませんが、どうぞよろしくお願いいたします。
###HTML
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="aboutus.css"> 8</head> 9<body> 10 <div class="aboutus"> 11 <div class="haikei"> 12 <img src="about_us.jpg" alt="#"> 13 </div> 14 15 <div class="link"> 16 <a class="toiawase" href="">Contact（お問い合わせ）</a> 17 <a class="zisseki" href="">Results (制作実績）</a> 18 <a class="service" href="">Service (私たちについて）</a> 19 </div> 20 </div> 21</body> 22</html>
###CSS
CSS
1.haikei img{ 2 width: 100%; 3 min-width: 800px; 4} 5 6.link{ 7 width: 100%; 8 min-width: 800px; 9 position: relative; 10} 11 12 13.toiawase{ 14 position: absolute; 15 left:5%; 16} 17 18.zisseki{ 19 position: absolute; 20 left:45%; 21} 22 23.service{ 24 position: absolute; 25 right: 5%; 26} 27
###試してみたこと
リンクのまとめてある親要素”.link”にCSSでBOTTOM:0;としたところ、画像の中央にリンクが出てきました。
他にも、画像幅をｐｘで指定し、位置も固定したりしたのですが、
さすがにウィンドウが小さくなった時に横スクロールがあるサイトはおかしいなと思ってやめました。
回答2件
0
ベストアンサー
クラス「aboutus」をrelativeに設定し、クラス「link」をabsoluteすればできるのではないでしょうか。
投稿2020/04/08 03:59
総合スコア368
0
どのような表示をお望みなのかわからないのですが、これではダメなのですか？
css
1.link{ 2 width: 100%; 3 min-width: 800px; 4 position: absolute; 5 top: 50%; 6}
投稿2020/04/08 03:59
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/08 04:06
2020/04/08 04:45
2020/04/08 04:52