position:abslouteを指定すると左揃えになってしまう

画像のような構成にしたいのですが、二段目のposition：absoluteがうまくいきません。
1段目と3段目とはテキストと画像の構成が逆なのですが、absoluteを掛けた時点で画像が左寄せになってしまいます。テキストは画像にやや重なった状態したいため絶対配置にします。

よろしくおねがいします。

<div class="ibent-area">
	
	<div class="ibent-inner">
	<div class="ibent-midashi-area">
		<p><img src="img/bg_ribon.png" alt="てきすとてきすとてき
</p>
		<h2 class="ibent-midashi">てきすとてきすとてきすとてきすt</h2>
	</div>
	

	<p class="ibent-text">てきすとてきすとてきすとてきすt</p>

	<div class="ibent-list">
		<div class="ibent-img">
			<img src="img/event_easteregg.jpg" alt="Easter Egg Hunt">
		</div>

		<p class="ibent-list-text">
てきすとてきすとてきすとてきすt
		</p>
	</div>

	<div class="ibent-list2">
		<p class="ibent-list-text2">
てきすとてきすとてきすとてきすt
		</p>

		<div class="ibent-img2">
			<img src="img/event_halloween.jpg" alt="Halloween　Party">
		</div>
	</div>

	<div class="ibent-list">
		<div class="ibent-img">
			<img src="img/event_christmas.jpg" alt="Christmas Party">
		</div>

		<p class="ibent-list-text">
てきすとてきすとてきすとてきすt
		</p>
	</div>
		
	</div>
</div>
<!--イベント紹介-->
コード

/*ibent-area*/
.ibent-area{
	margin: 72px auto 72px;
	width: 100%;

}
.ibent-inner{
	width: 70%;
	margin: 0 auto;
}
.ibent-midashi-area{
	position: relative;
}
.ibent-midashi{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);
	color:#fff;
	font-family: Times, serif;
	
}
.ibent-text{
	text-align: center;
	line-height: 2;
	font-size:1.5rem;
	margin: 24px auto 24px;
	position: relative;
}
.ibent-list{
	display: flex;
	width: 100%;
	margin-bottom: 40px;
	text-align: left;
	position: relative;
}
.ibent-img{
	width: 40%;
}
.ibent-list-text{
	font-size: 1.4rem;
	width: 60%;
	line-height: 2;
	position: absolute;
	top:20%;
	left:35%;
}
.ibent-list2{
	display: flex;
	width: 100%;
	margin-bottom: 40px;
	position: relative;	
}
.ibent-list-text2{
}

/*//ibent-area*/
コード

yambejp

2020/09/20 04:05

最初のimgがきちんと閉じていません

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

回答2件

position:absloute は他の要素から浮いた状態になるので、位置合わせが面倒なことになりがちです。

要素を重ねたいなら、ネガティブマージンを使うのがシンプルにできるというのが私の経験則です。

こまかい仕様が不明なので、適当にサンプルを作成しましたので、参考にしてください。

html
1<div class="ibent-area">
2  <div class="ibent-inner">
3
4    <div class="ibent-list">
5      <div class="ibent-img">
6        <img src="https://placehold.jp/150x150.png?text=EasterEgg" alt="Easter Egg Hunt">
7      </div>
8      <p class="ibent-list-text">
9        てきすとてきすとてきすとてきすt
10      </p>
11    </div>
12
13    <div class="ibent-list">
14      <div class="ibent-img">
15        <img src="https://placehold.jp/150x150.png?text=halloween" alt="Halloween Party">
16      </div>
17      <p class="ibent-list-text">
18        てきすとてきすとてきすとてきすt
19      </p>
20    </div>
21
22    <div class="ibent-list">
23      <div class="ibent-img">
24        <img src="https://placehold.jp/150x150.png?text=christmas" alt="Christmas Party">
25      </div>
26      <p class="ibent-list-text">
27        てきすとてきすとてきすとてきすt
28      </p>
29    </div>
30  </div>
31</div>

css
1/*ibent-area*/
2.ibent-area{
3  margin: 72px auto 72px;
4  width: 100%;
5
6}
7.ibent-inner{
8  width: 70%;
9  margin: 0 auto;
10}
11
12.ibent-list{
13  display: flex;
14  align-items: center;
15  width: 100%;
16  margin-bottom: 40px;
17  text-align: left;
18  position: relative;
19}
20
21.ibent-list p {
22  margin-left: -5%;
23}
24.ibent-list:nth-child(even) {
25  flex-direction: row-reverse;
26}
27.ibent-list:nth-child(even) p {
28  text-align: right;
29  margin-right: -5%;
30}
31
32.ibent-img{
33  width: 40%;
34}
35.ibent-img img {
36  width: 100%;
37}
38
39.ibent-list-text{
40  font-size: 1.4rem;
41  width: 60%;
42  line-height: 2;
43}

CodePen サンプル

投稿2020/09/20 05:20

hatena19

総合スコア34075

完成形がいまいちイメージつかないのですが、こんな感じで

CSS
1<style>
2
3img.left{float:left}
4div.right{
5  text-align:right;
6}
7img.right{float:right}
8.wrap div::after {
9  content: "";
10  display: block;
11  clear: both;
12}
13</style>
14<div class="wrap">
15<div>
16<img src="" alt="img1" height="100" width="100" class="left">
17てすとてすとてすとてすとてすと<br>
18てすとてすとてすとてすとてすと<br>
19てすとてすとてすとてすとてすと<br>
20てすとてすとてすとてすとてすと<br>
21てすとてすとてすとてすとてすと<br>
22てすとてすとてすとてすとてすと<br>
23</div>
24<div class="right">
25<img src="" alt="img2" height="100" width="100" class="right">
26てすとてすとてすとてすとてすと<br>
27てすとてすとてすとてすとてすと<br>
28てすとてすとてすとてすとてすと<br>
29てすとてすとてすとてすとてすと<br>
30てすとてすとてすとてすとてすと<br>
31てすとてすとてすとてすとてすと<br>
32</div>
33</div>
34<div>
35<img src="" alt="img3" height="100" width="100" class="left">
36てすとてすとてすとてすとてすと<br>
37てすとてすとてすとてすとてすと<br>
38てすとてすとてすとてすとてすと<br>
39てすとてすとてすとてすとてすと<br>
40てすとてすとてすとてすとてすと<br>
41てすとてすとてすとてすとてすと<br>
42</div>
43</div>