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

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

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

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

HTML5

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

Q&A

解決済

1回答

286閲覧

画像の上にテキストをposition:absolute;で配置したい

spn

総合スコア37

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2022/11/07 12:45

前提

画像の上にテキストを配置したい。
#area-sweetsで
position:relative;を画像に指定し、
position: absolute;で文字を浮かせたのですが、
テキストがヘッダーに浮いてしまっています。

実現したいこと

画像の上にテキストを配置し、かつレスポンシブ対応で横スクロールにも対応したい。
↓お手本
https://xd.adobe.com/view/0e24b0e3-a160-4f60-90da-3fd37fe8cfd8-5b77/?hints=off

該当のソースコード

html

1<body> 2<!-- ヘッダー ---------------> 3<header class="header"> 4 <div class="container"> 5 <div class="area-logo area-logo-header"> 6 <h1><a href="#">創作</a></h1> 7 </div> 8 <nav class="nav-header"> 9 <ul class="list-nav-header"> 10 <li><a href="#area-news">お 知 ら せ</a></li> 11 <li><a href="#area-sweets">商 品 の ご 紹 介</a></li> 12 <li><a href="#shop">店 舗 の ご 案 内</a></li> 13 </ul> 14 </nav> 15 </div> <!-- ./container --> 16 17 <!-- トップビュー -----------------> 18 <div class="area-top-view"> 19 <div class="container"> 20 <a class="botton-store" href="">オンラインストアを見る</a> 21 </div> <!-- ./container --> 22 </div><!-- ./area-top-view --> 23</header> 24 25<main> 26 <!-- お知らせ -----------------> 27 <div class="container"> 28 <section id="area-news"> 29 <div class="news-container"> 30 <div class="head-news"> 31 <h2 class="ttl ttl-news"><span class="english">News</span><span class="japanese">お 知 ら せ</span></h2> 32 </div> 33 <dl class="news-wrapper"> 34 <dt>2020.12.22</dt><dd>ホームページをリニューアルしました。</dd> 35 <dt>2020.11.22</dt><dd>【季節限定】米ころんを発売いたしました。</dd> 36 <dt>2020.8.28</dt><dd>【店舗受取】十三夜お月見団子、予約受付中です。</dd> 37 <dt>2020.5.4</dt><dd>【春限定】桜葉が香る、春の訪れを感じる「桜どら焼き」、完売しました!</dd> 38 <dt>2020.4.7</dt><dd>【おすすめ】 端午の節句に家族団らん!鯉のぼりと信玄餅セット、販売しました!</dd> 39 </dl> 40 </div> 41 42 43 44 </section><!-- area-news --> 45 46 <!-- コンテンツ --------------> 47 <section id="area-sweets"> 48 <div class="head-sweets-A"> 49 <h3 class="ttl ttl-contents"><span class="japanese">新 し い 価 値 の 創 造</span><span class="english">Create New Values</span></h3> 50 <img src="code-step-img/products1" alt="ブルーベリーソースの和菓子"> 51 <p>旬の素材を使った和菓子。</p> 52 </div><!-- ./head-seewts-A --> 53 </section><!-- ./area-sweets1 --> 54 55 <section id="area-sweets"> 56 <div class="head-sweets-B"> 57 <h3 class="ttl ttl-contents"><span class="japanese">科 学 と 技 術 の 調 和</span><span class="english">Sience & Technology</span></h3> 58 <img src="code-step-img/products2" alt="チョコブラウニー"> 59 <p>日本ならではの風情を<br>お楽しみください。</p> 60 </div><!-- ./head-seewts-B --> 61 </section><!-- ./area-sweets2 --> 62 </div> <!-- ./container --> 63 64 65</body>

css

1/* 共通部分 2----------------------------------*/ 3html { 4 font-size: 100%; 5 6} 7 8body { 9 font-family: 'Noto Serif JP', serif; 10 color: #141414; 11} 12 13a { 14 text-decoration: none; 15 list-style: none; 16 color: #fff; 17} 18ul { 19 list-style: none; 20 text-decoration: none; 21} 22img { 23 max-width: 100%; 24} 25 26/* ヘッダー 27----------------------------------*/ 28header { 29 width: 100%; 30 height: 600px; 31 position: relative; 32 top: 0; 33 right: 0; 34 display: flex; 35 justify-content: flex-end; 36} 37header > .container { 38 margin-top: 60px; 39 -ms-writing-mode: tb-rl; 40 -webkit-writing-mode: vertical-rl; 41 writing-mode: vertical-rl; 42} 43/* ロゴ */ 44.area-logo-header > h1{ 45 margin-left: 60px; 46 margin-right: 80px; 47 48} 49.area-logo > h1 { 50 font-size: 40px; 51 color: #FFFFFF; 52 letter-spacing: 0.3em; 53 -ms-writing-mode: tb-rl; 54 -webkit-writing-mode: vertical-rl; 55 writing-mode: vertical-rl; 56} 57/* ナビ */ 58.list-nav-header { 59 margin: 0 -17.5px; 60} 61.list-nav-header > li{ 62 color: #FFFFFF; 63 font-size: 16px; 64 line-height: 16px; 65 padding: 0 17.5px; 66} 67/* ボタン */ 68.botton-store { 69 color: #FFFFFF; 70 -ms-writing-mode: tb-rl; 71 -webkit-writing-mode: vertical-rl; 72 writing-mode: vertical-rl; 73 position: absolute; 74 bottom: 30px; 75 left: 48px; 76 background: #FFFFFF33 0% 0% no-repeat padding-box; 77 opacity: 0.9; 78 height: 257px; 79 width: 68px; 80 outline : 1px solid #CCCCCC; /* 線の太さ・線状・色 */ 81 outline-offset : -8px ;/* どれだけ内側に線を表示したいかを負の値で指定 */ 82 display: flex; 83 align-items: center; 84 justify-content: center; 85 letter-spacing: 1.7px; 86} 87/* トップビュー */ 88.header { 89 background-image: url(code-step-img/mainvisual-pcd); 90 background-repeat: no-repeat; 91 background-position: 80% 20%; 92 background-size: cover; 93 background-color: #CCCCCC; 94 height: 100vh; 95} 96 97 98 99/* お知らせ 100----------------------------------*/ 101main { 102 background-color: #E6E2D7; 103} 104.news-container { 105 -ms-writing-mode: tb-rl; 106 -webkit-writing-mode: vertical-rl; 107 writing-mode: vertical-rl; 108 margin-left: auto; /* ブロック右寄せ */ 109} 110.head-news, 111.news-wrapper{ 112 display: inline-block; 113} 114 115 116.news-wrapper > dt + dd { 117 border-left: 1px solid #000000; 118 gap:5px; 119 120} 121.news-wrapper { 122 border-right: 1px solid #000000; 123 margin-top: 275.5px; 124 margin-bottom: 295.5px; 125 margin-left: 5%; 126} 127.news-wrapper > dt { 128 font-size: 9px; 129 padding-right: 7%; 130 padding-top: 15px; 131 padding-bottom: 15px; 132} 133 134.news-wrapper > dd { 135 height: 291px; 136 font-size: 16px; 137 padding-left: 7%; 138 padding-top: 15px; 139 padding-bottom: 15px; 140 margin-top: 0; /* 既定のマージンをリセット */ 141} 142 143 144.ttl { 145 font-size: 36px; 146 letter-spacing: 0; 147 font-weight: 400; 148} 149.japanese { 150 display: block; 151 margin-right: 1%; 152 margin-top: 18px; 153} 154.english { 155 font-size: 0.875rem; 156 display: block; 157 158} 159.ttl-news { 160 padding-top: 180px; 161 margin-left: 9.2%; 162 margin-right: 15%; 163 margin-bottom: 295.5px; 164} 165 166 167/* コンテンツ 168----------------------------------*/ 169/* コンテンツ 共通 */ 170.head-sweets-A, 171.head-sweets-B { 172 display: flex; 173} 174.ttl-contents { 175 -ms-writing-mode: tb-rl; 176 -webkit-writing-mode: vertical-rl; 177 writing-mode: vertical-rl; 178} 179.head-sweets-A img , 180.head-sweets-B img { 181 width: 45%; 182 position: relative; 183 margin-top: 120px; 184} 185 186.head-sweets-A > p , 187.head-sweets-B > p { 188 color: #fff; 189 position: absolute; 190 font-size: 1.1vw; 191 display: inline-block; 192 padding: 50px 0; 193 text-align: center; 194 writing-mode: horizontal-tb; 195 width: 56%; 196 bottom: -20px; 197} 198 199 200/* コンテンツ 個別 */ 201.head-sweets-A { 202 flex-direction: row-reverse; 203} 204.head-sweets-A .ttl { 205 margin-right: 10%; 206} 207.head-sweets-B .ttl { 208 margin-left: 10%; 209} 210.head-sweets-A > p { 211 background-color: #F9E90699; 212 opacity: 0.9; 213 left: -20px; 214} 215.head-sweets-B > p { 216 background-color: #952A2699; 217 opacity: 0.9; 218 margin-bottom: 159.5px; 219 right: -20px; 220} 221.head-sweets-A > img { 222 margin-bottom: 280px; 223} 224.head-sweets-B > img { 225 margin-bottom: 180px; 226} 227.ttl-contents .english, 228.ttl-contents .japanese{ 229 display: inline-block; 230} 231.ttl-contents .english{ 232 margin-top: 18px; 233} 234 235 236 237/* レスポンシブ対応 */ 238@media (max-width:768px) { 239 /* ヘッダー */ 240 .header{ 241 background-position: 30% top; 242 } 243 .area-logo-header > h1{ 244 margin-left: 5%; 245 margin-right: 5%; 246 } 247 .botton-store { 248 left: 18px; 249 } 250 /* お知らせ */ 251 252 .news-wrapper dt:nth-of-type(n + 4) { 253 display: none; 254 } 255 .news-wrapper dd:nth-of-type(n + 4) { 256 display: none; 257 } 258 .ttl-news { 259 margin-left: 2%; 260 margin-right: 5%; 261 } 262 263 .news-wrapper > dt { 264 padding-right: 3%; 265 } 266 .news-wrapper > dd { 267 padding-left: 3%; 268 } 269 .news-wrapper { 270 margin-left: 2%; 271 } 272 .head-sweets-A .japanese { 273 margin-right: 0px; 274 275 } 276 277 278 /* コンテンツ */ 279 .head-sweets-A, 280 .head-sweets-B { 281 justify-content: center; 282 } 283 .ttl-contents { 284 font-size: 24px; 285 } 286 .ttl-contents .english { 287 display: none; 288 } 289 .head-sweets-A > img, 290 .head-sweets-B > img { 291 width: 80%; 292 } 293 .head-sweets-A .ttl { 294 margin-right: 5%; 295 margin-left: 5px; 296 } 297 .head-sweets-B .ttl { 298 margin-left: 5px; 299 } 300 .head-sweets-B .ttl { 301 margin-left: 5%; 302 } 303 304 305 306 307}

試したこと

コードの解説を見ながらその通りにコードを書き直したが、
うまくいかない。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

position: absolute;は祖先要素のなかで直近のstatic以外のpositionを設定している要素(relativeも含む)を起点とします。祖先要素とは親要素のより上位の要素ですので、兄弟要素は含みません。

提示のCSSは
.head-sweets-A img , .head-sweets-B imgposition:relative;を、
.head-sweets-A > p , .head-sweets-B > pposition: absolute;を設定しています。
この2つは兄弟要素のなので、このimgを起点とすることはできません。(そもそも、img要素は子要素を持ちませんので何かの起点にはなりえません。)

このp要素の直近の親要素である.head-sweets-A, .head-sweets-Bposition:relative;を設定してこれを起点として絶対配置すればいいでしょう。

投稿2022/11/07 13:43

hatena19

総合スコア33620

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

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

spn

2022/11/08 06:35

わかりやすい解説ありがとうございます。 初歩的な質問でお恥ずかしい限りです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問