position:relativeとabsoluteについて

position:relativeとabsoluteを使って、位置調整しています。
２つ目のrelative（slide1）に対して、.slidetextの位置を決めたいのに
.slidetextは１つ目の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);
}

コード

行動規範の内容に同意します

回答2件

ベストアンサー

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