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

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

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

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

HTML5

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

Q&A

解決済

2回答

395閲覧

position:relativeとabsoluteについて

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2020/06/02 01:49

編集2020/06/02 02:18

イメージ説明position:relativeとabsoluteを使って、位置調整しています。
2つ目のrelative(slide1)に対して、.slidetextの位置を決めたいのに
.slidetextは1つ目のrelative(hero-image)に対しての絶対位置になってしまいます。

relativeとabsoluteの組み合わせる場合、relativeはabsoluteの基準点になってくれるみたいなイメージだったんですが、基準点を複数できないのでしょうか。

よろしくお願いします。

<header> <img src="image" alt="hero-image" class="hero-image"> <div class="top-text"> <p class="top-text-1">テキスト</p> <p class="top-text-2">テキスト</p> </div> <section> <div class="slide1"> <img src="image/AdobeStock_177157909.jpeg" alt="画像"> </div> <p class="slide-text">テキストテキスト</p> </section> コード
/*header*/ .hero-image{ background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; width: 100%; } .top-text{ position: absolute; top:130px; left:0; } .top-text-1{ margin-bottom: 10px; background-color: #fff; font-size:3.2rem; letter-spacing: 0.25em; font-weight: 300; padding: 15px; } .top-text-2{ background-color: #fff; font-size:3.2rem; letter-spacing: 0.25em; font-weight: 300; padding: 15px; } /*/header*/ .slide1{ background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; width: 100%; } .slide-text{ position:absolute; top:50%; left:50%; transform: translate3d(-50%,-50%,0); } コード

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

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

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

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

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

guest

回答2

0

ベストアンサー

relative, absoluteを使い配置したいことは何となくわかります。relativeを基準という言い方を間違って理解していなければ、ですが。

まず、それぞれの要素の階層を考えてみてください。relativeを指定している要素とabsoluteを指定している要素これらの関係は、単に”隣接した”要素ということになります。

relativeを指定した要素を基準とするならば、その要素の子要素にabsoluteを指定しなければなりません。

この場合であれば、slide1に relativeを指定するのではなく、
sectionのようにラップされた要素にrelativeを指定し,そのsection要素内の絶対位置(absolute)に配置するという形が近いのではないでしょうか。

ちなみに、コードに反映していませんが、.top-textの方も画像に対してabsoluteが働いているわけではありません。headerがどこで閉じられるのかわかりませんが・・・

html

1<header> 2<img src="image" alt="hero-image" class="hero-image"> 3 4<div class="top-text"> 5<p class="top-text-1">テキスト</p> 6<p class="top-text-2">テキスト</p> 7</div> 8</header> <!-- ヘッダーはここで閉じる予定? --> 9 10 11<section class="container"> 12<div class="slide1"> 13 <img src="image/AdobeStock_177157909.jpeg" alt="画像"> 14</div> 15 16<p class="slide-text">テキストテキスト</p> 17</section> 18

css

1 2.container{ 3 position: relative; 4} 5 6/*header*/ 7.hero-image{ 8 background-position: center center; 9 background-repeat: no-repeat; 10 background-size: cover; 11 height: 100vh; 12 position: relative; 13 width: 100%; 14 15} 16.top-text{ 17 position: absolute; 18 top:130px; 19 left:0; 20} 21.top-text-1{ 22 margin-bottom: 10px; 23 background-color: #fff; 24 font-size:3.2rem; 25 letter-spacing: 0.25em; 26 font-weight: 300; 27 padding: 15px; 28} 29.top-text-2{ 30 background-color: #fff; 31 font-size:3.2rem; 32 letter-spacing: 0.25em; 33 font-weight: 300; 34 padding: 15px; 35} 36/*/header*/ 37 38 39 40.slide1{ 41 background-position: center center; 42 background-repeat: no-repeat; 43 background-size: cover; 44 height: 100vh; 45 /* position: relative;*/ 46 width: 100%; 47} 48.slide-text{ 49 position:absolute; 50 top:50%; 51 left:50%; 52 transform: translate3d(-50%,-50%,0); 53} 54 55

投稿2020/06/02 02:26

Yasuhiro

総合スコア46

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

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

退会済みユーザー

退会済みユーザー

2020/06/02 02:31

無事解決できました。 本当にただ、隣り合っているだけで子要素ではなかったですね。。。 ありがとうございます!助かりました
guest

0

slide1とslide-textの間に関連性がない(構造的に依存していない)ので
slide-textはslide1に影響を受けずにposition:absoluteを適用していますね
とくに問題ないように見えますが、希望する結果はどういうものなのでしょうか

投稿2020/06/02 02:12

編集2020/06/02 02:13
yambejp

総合スコア114581

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

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

退会済みユーザー

退会済みユーザー

2020/06/02 02:20

汚い手書きですいませんが、わかりますでしょうか。 hero-imageに対してtoptext2つをabsoluteで位置調整したい。 一方で別のslide1(img)に対して、別のテキストをabsoluteで上下中央配置したいという感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問