画像をテキストボックスの上に重ねたい

お世話になっております。
以下のデザインを実現させたいと思っております。

アイコンをテキストボックスに重ねる際、position: relative;と
position: absolute；を使用したところ、アイコンがページのトップに来てしまいます。

TOPで指定をすると大きな数字になってしまい、もっと正確な
方法をプロの方にご教示いただければ幸いです。どうぞよろしくお願いいたします。

html
1<html>
2<body>
3 <div class="example_wrap">
4        <div class="example_box">
5          <div class="example_box_title">
6            <img
7              class="example_box_title_icon"
8              src="img/e_icon_1.png"
9              alt="PC"
10            />
11          </div>
12          <!--example_box_title-->
13          <div class="example_box_inner">
14            　
15            <p class="example_box_title_text">
16              新規サービスの<br />コンテンツ作成代行 　
17            </p>
18            <p class="example_box_text">
19              新規サービスのコンテンツ作成を代行。
20              実質３時間のお打ち合わせで３０万円の売り上げを達成。
21            </p>
22          </div>
23          <!--box_inner-->
24        </div>
25        <!--example_box-->
26        <div class="example_box">
27          <div class="example_box_title">
28            <img
29              class="example_box_title_icon"
30              src="img/e_icon_2.png"
31              alt="PC"
32            />
33          </div>
34          <!--example_box_title-->
35          <div class="example_box_inner">
36            　　
37            <p class="example_box_title_text">新規商品案の企画 　　</p>
38            <p class="example_box_text">
39              アクセサリーアイディアの考案。 １回のインスタ集客で１４名に販売。
40            </p>
41          </div>
42          <!--box_inner-->
43        </div>
44        <!--example_box-->
45        <div class="example_box">
46          <div class="example_box_title">
47            <img
48              class="example_box_title_icon"
49              src="img/e_icon_3.png"
50              alt="PC"
51            />
52          </div>
53          <!--example_box_title-->
54          <div class="example_box_inner">
55            　　
56            <p class="example_box_title_text">　　新規事業の立ち上げ 　　</p>
57            <p class="example_box_text">
58              新規事業でのコンテンツ案・コンテンツ作成・動画配信・SNS投稿・
59              オンラインサロン運営など、サポーターとして事業パートナーの契約を締結。
60              起業３ヶ月目で月商３００万円の売り上げに貢献。
61            </p>
62          </div>
63
64          <!--box_inner-->
65        </div>
66        <!--example_box-->
67      </div>
68      <!--example_wrap-->
69</body>
70</html>

css
1content_example .example_wrap {
2  display: flex;
3  justify-content: center;
4  padding: 20px 0;
5}
6.content_example .example_wrap .example_box {
7  width: 300px;
8  margin: 0 45px;
9}  
10.example_box_inner{
11height: 250px;
12 background-color: #fff;  
13 position: relative;
14 box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 6%);
15}
16.content_example .example_wrap 
17.example_box .example_box_title {
18  text-align: center;
19  margin: 0 auto;
20}
21.example_box_title img{
22}
23
24.example_box_title_text{
25  width: 232px;
26  margin: 0 auto;
27  font-weight: 700;
28  text-align: center;
29  padding-top: 20px;
30  color: #5e6265;
31}
32.content_example
33.example_wrap
34.example_box
35.example_box_title
36.example_box_title_icon {
37  padding: 10px 0;
38}
39.content_example
40.example_wrap
41.example_box
42.example_box_title
43.example_box_title_text {
44  font-size: 16px;
45  width: 250px;  
46}
47
48.content_example .example_wrap .example_box .example_box_text {
49line-height: 1.5;
50padding-top: 30px;
51background-color: #fff;
52padding: 30px;
53}

Lhankor_Mhy

2021/02/12 08:13

.content_example は body につけて構いませんか？

Lhankor_Mhy

2021/02/12 08:19

ご提示のコードを試してみましたが、position: relative と position: absolute で上手くいくと思います。上手くいかなかったコードをご提示いただけますか？

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

回答2件

HTMLに「content_example（タグ？クラス？）」がないのにCSSにはついています

投稿2021/02/12 08:24

yambejp

総合スコア116724

目指しているのが横に3つを均等に配置するなら

html/css
1<!DOCTYPE html>
2<html>
3<html lang="ja" dir="ltr">
4
5<body>
6
7  <style>
8    content_example, .example_wrap {
9      display: flex;
10      justify-content: center;
11      padding: 20px 0;
12    }
13    .content_example, .example_wrap, .example_box {
14      /*width: 300px;*/
15      margin: 0 45px;
16    }
17    .example_box_inner{
18      height: 300px;
19      background-color: #fff;
20      position: relative;
21      box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 6%);
22    }
23    .content_example, .example_wrap
24    .example_box, .example_box_title {
25      text-align: center;
26      margin: 0 auto;
27    }
28    .example_box_title img{
29    }
30
31    .example_box_title_text{
32      width: 232px;
33      margin: 0 auto;
34      font-weight: 700;
35      text-align: center;
36      padding-top: 20px;
37      color: #5e6265;
38    }
39    .content_example,
40    .example_wrap,
41    .example_box,
42    .example_box_title,
43    .example_box_title_icon {
44      padding: 10px 0;
45    }
46    .content_example,
47    .example_wrap,
48    .example_box,
49    .example_box_title,
50    .example_box_title_text {
51      font-size: 16px;
52      /*width: 250px;*/
53    }
54
55    .content_example, .example_wrap, .example_box, .example_box_text {
56      line-height: 1.5;
57      padding-top: 30px;
58      background-color: #fff;
59      padding: 30px;
60    }
61
62    .example_box{
63      width: calc(100% / 3);
64    }
65
66
67  </style>
68  <div class="example_wrap">
69    <div class="example_box">
70      <div class="example_box_title">
71        <img
72        class="example_box_title_icon"
73        src="img/e_icon_1.png"
74        alt="PC"
75        />
76      </div>
77      <!--example_box_title-->
78      <div class="example_box_inner">
79
80        <p class="example_box_title_text">
81          新規サービスの<br />コンテンツ作成代行 　
82        </p>
83        <p class="example_box_text">
84          新規サービスのコンテンツ作成を代行。
85          実質３時間のお打ち合わせで３０万円の売り上げを達成。
86        </p>
87      </div>
88      <!--box_inner-->
89    </div>
90    <!--example_box-->
91    <div class="example_box">
92      <div class="example_box_title">
93        <img
94        class="example_box_title_icon"
95        src="img/e_icon_2.png"
96        alt="PC"
97        />
98      </div>
99      <!--example_box_title-->
100      <div class="example_box_inner">
101
102        <p class="example_box_title_text">新規商品案の企画 　　</p>
103        <p class="example_box_text">
104          アクセサリーアイディアの考案。 １回のインスタ集客で１４名に販売。
105        </p>
106      </div>
107      <!--box_inner-->
108    </div>
109    <!--example_box-->
110    <div class="example_box">
111      <div class="example_box_title">
112        <img
113        class="example_box_title_icon"
114        src="img/e_icon_3.png"
115        alt="PC"
116        />
117      </div>
118      <!--example_box_title-->
119      <div class="example_box_inner">
120
121        <p class="example_box_title_text">　　新規事業の立ち上げ 　　</p>
122        <p class="example_box_text">
123          新規事業でのコンテンツ案・コンテンツ作成・動画配信・SNS投稿・
124          オンラインサロン運営など、サポーターとして事業パートナーの契約を締結。
125          起業３ヶ月目で月商３００万円の売り上げに貢献。
126        </p>
127      </div>
128
129      <!--box_inner-->
130    </div>
131    <!--example_box-->
132  </div>
133  <!--example_wrap-->
134</body>
135</html>
136