画像の上に文章を重ね合わせたいです。

ケーキの画像(.cake-01)を親要素(.ctr-item-02)の右端に設置して、
文章(.p-01)を画像の上に重ねたいです。
文章は親要素の左上端に置きます。
「position:relative」を試してみましたが上手く行きませんでした。
今の段階ではfirefoxの開発者ツールでスマートフォン向けのレイアウト(347.2*100)を作っています。

https://portfolio04222020.web.fc2.com/content_01/root/content_01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>site-ttl-01 | page-ttl-01</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
<script src="https://kit.fontawesome.com/abda8f59ff.js"></script><!-- fontawesome ver5.3.0 CDN -->
<link rel=stylesheet href=css/style.css>
</head>

<body class="content-01"><!-- 【.content-01】 ここから↓ -->
  <div class="width-cont"><!-- .width-cont ここから↓ -->
    <section class="block-01 width-01"><!-- 【コンテンツ・ブロック .block-01】 ここから↓ -->
      <h1 class="h1-01">架空商店街 月刊お店ピックアップ</h1>
      <div class="ctr-flex-01"><!-- .ctr-flex-01 ここから↓ -->
        <div class="ctr-item-01"><!-- .ctr-item-01 ここから↓ -->
          <div class="circle-01">
            <p class="circle-inner-01">No.4</p>
          </div>
        </div><!-- .ctr-item-01 ここまで↑ -->
        <div class="ctr-item-02">
          <p class="p-01">家族の会話をはずませる。<br>月一回の「お届けケーキ」の魔法</p>
          <img class="cake-01" src="img/cake_01.jpg"><!-- タルトの画像 -->
        </div><!-- .ctr-item-02 ここまで↑ -->
      </div><!-- .ctr-flex-01 ここまで↑ -->
    </section><!-- 【コンテンツ・ブロック .block-01】 ここまで↑ -->

    <div class="ctr-flex-04"><!-- .ctr-flex-04 ここから↓ -->
      <aside class="block-02"><!-- 【コンテンツ・ブロック .block-02】 ここから↓ -->
        <img src="img/simple-human_01.png">
        <p>ラッキーケーキ<br>
          製菓担当 山田太郎</p>
        <p>〇〇製菓専門学校 製菓総合科卒業後
          製菓衛生士取得）、洋菓子専門店〇〇〇を展開する（株）●●コーポレーションに入社。
          〇〇〇北沢本店のパティシエとして生洋菓子、焼き菓子、ショコラまで製造全般の仕事を〇年経験。
          結婚式場△△△を運営する（株）◇◇◇に転職、バンケット部門のパティシエとして勤務し、現在に至る。</p>
      </aside><!-- 【コンテンツ・ブロック .block-02】 ここまで↑ -->

      <main><!-- 【コンテンツ・ブロック .block-03】 ここから↓ -->
        <h2>毎月お届けするのは<br>
          タルトと果物、そして<br>
          家族団らんのきっかけです。</h2>
        <p>お菓子作りが好き、お店が好き！思いを伝えて採用に。</p>
        <p>店での仕事は、早くて正確に。どちらが欠けてもダメなんです。</p>
        <p>現在はお店の厨房で、ケーキのデコレーションなどの仕上げ作業を担当。
          現場では、学校で学んできた基本の技術以外に、臨機応変な対応が求められます。
          「ホールのデコレーションケーキを切ってほしい、
          上に載せるイチゴの量を別料金で増やしてほしいなどの要望にも、柔軟に対応します」
          お店では、お客様が安心して食べられるように、たくさんのケーキをいつも高い品質で作ることが求められます。
          入社後、最初に仕事を教わった上司からは、「仕事は早くて正確に」と教わりました。
          「早いだけでは、いつも安定して同じものは作れない。正確なだけでは、円滑に回らない。今もずっと意識しています」</p>
        <div>
          <img src="img/cake_02.jpg">
          <p>ケーキを作りながらアイデアが思いつくということもあるそうです。</p>
        </div>
      </main><!-- 【コンテンツ・ブロック .block-03】 ここまで↑ -->
    </div><!-- .ctr-flex-04 ここまで↑ -->
  </div><!-- .width-cont ここまで↑ -->
</body><!-- 【.content-01】 ここまで↑ -->
</html>

@charset "utf-8";

/* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ -------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  background     : transparent;
  border         : 0;
  font-size      : 100%;
  margin         : 0;
  outline        : 0;
  padding        : 0;
  vertical-align : baseline;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display : block;
}

nav ul {
  list-style : none;
}

blockquote,
q {
  quotes : none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content : '';
  content : none;
}

a {
  background     : transparent;
  font-size      : 100%;
  margin         : 0;
  padding        : 0;
  vertical-align : baseline;
}

/* change colours to suit your needs */
ins {
  background-color : #ff9;
  color            : #000;
  text-decoration  : none;
}

/* change colours to suit your needs */
mark {
  background-color : #ff9;
  color            : #000;
  font-style       : italic;
  font-weight      : bold;
}

del {
  text-decoration : line-through;
}

abbr[title],
dfn[title] {
  border-bottom : 1px dotted;
  cursor        : help;
}

table {
  border-collapse : collapse;
  border-spacing  : 0;
}

/* change border colour to suit your needs */
hr {
  border-top : 1px solid #ccc;
  border     : 0;
  display    : block;
  height     : 1px;
  margin     : 1em 0;
  padding    : 0;
}

input,
select {
  vertical-align : middle;
}
/* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここまで↑ -------------------- */



/* 【モバイルファーストによるCSSファイルの設計】 */
/* -------------------- 【ウェブサイト全体の共通箇所】 ここから↓ -------------------- */
/* 全ての要素にborder-boxを設定する */
*,
*:before,
*:after {
  -moz-box-sizing    : border-box;
  -ms-box-sizing     : border-box;
  -o-box-sizing      : border-box;
  -webkit-box-sizing : border-box;
  box-sizing         : border-box;
}

/* CSS変数・色の設定 */
body {
  --aqua       : aqua;
  --blk        : black;
  --blu        : blue;
  --brn        : brown;
  --facebook   : #3b5998;
  --fuchsia    : fuchsia;
  --gld        : gold;
  --googleplus : #dd4b39;
  --gray       : gray;
  --grn        : green;
  --gry        : gray;
  --lime       : lime;
  --maroon     : maroon;
  --mvr        : mediumvioletred;
  --navy       : navy;
  --olive      : olive;
  --orn        : orange;
  --pnk        : pink;
  --ppl        : purple;
  --red        : red;
  --sil        : silver;
  --teal       : teal;
  --twitter    : #1da1f2;
  --wht        : white;
  --yel        : yellow;
}

/* 背景色 */
body {
  background-color : lightgray;
}

/* CSS変数・コンテンツ幅の設定 ここから↓ */
body {
  --width-max   : 100%;
  --width-pc-01 : 80rem;
  --width-pc-02 : 70rem;
  --width-pc-03 : 93rem;
  --width-sp-01 : 60rem;
  --width-sp-02 : 58rem;
  --width-tv-01 : 110rem;
  --width-tv-02 : rem;
}

.width-max {
  padding : 1rem;
  width   : var(--width-max);
}
/* CSS変数・コンテンツ幅の設定 ここまで↑ */

/* フォントの種類の設定 */
body {
  font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/* フォントサイズ ここから↓
  1(px)  : .1(rem)  : .093(vw)
  1(rem) : .926(vw) : 10(px)
  1(vw)  : 10.8(px) : 1.08(rem)
  1rem   : 10px     : .926vw
*/
:root {
  font-size : 62.5%;
}
/* フォントサイズ ここまで↑ */

/* テキストの自動拡大を無効化 */
body {
  -webkit-text-size-adjust : none;
  text-size-adjust         : none;
}

/* ブラウザが挿入する余白を削除する */
body {
  margin : 0;
}

/* リストマークを削除する */
ul {
  list-style : none;
}

/* コンテンツ・ブロックのレイアウト */
 [class|="block"] {
  padding-left  : 1em;
  padding-right : 1em;
}

/* 画像 ここから↓ */
[class|="figure"] {
  margin : 0;
}

[class|="fig"],
[class|="ph"] {
  height : auto;
  width  : 100%;
}
/* 画像 ここまで↑ */
/* -------------------- 【ウェブサイト全体の共通箇所】 ここまで↑ -------------------- */



/* -------------------- 【スマートフォン向けの設定】 ここから↓ -------------------- */
/* -------------------- 【.htmlの設定】 ここから↓ -------------------- */
/* スマートフォン版：コンテンツ内側の画面幅 */
.width-01 {
  max-width : var(--width-sp-02);
}

/* スマートフォン用フォントサイズの設定 */
body {
  font-size : 1.4rem;
}

/* 【コンテンツ・ブロック .block-01 】 ここから↓ */

/* 見出し */
.h1-01 {
  padding-top:1em;
  padding-bottom:1em;
  font-size: 120%;
}

/* フレックス .ctr-flex-01 ここから↓*/
.ctr-flex-01 {
  display:flex;
  background-color: var(--wht);
  height:10rem;
}

.ctr-item-01 {
  width:5rem;
}

.circle-01 {
  background-color : orange;
  border-radius    : 50%;
  height         : 5rem;
  margin-top:2.5rem;
  margin-bottom:2.5rem;
  position:relative;
}

.circle-inner-01 {
  position:absolute;
  font-family      : "Times New Roman";
  font-size        : 100%;
  font-weight      : bold;
  line-height      : 10rem;
  text-align       : center;
  -webkit-transform : translate(-50%, -50%);
  left              : 50%;
  position          : absolute;
  top               : 50%;
  transform         : translate(-50%, -50%);
}

.ctr-item-02 {
  /* position:relative; */
}

.p-01 {
  height:10rem;
  /*   position:absolute;
  left:0;
  top:0;
  z-index:2; */
}

.cake-01 {
  height:10rem;
  /* font-size:0;
  z-index:1;
  position:absolute;
  right:0;
  bottom:0; */
}
/* フレックス .ctr-flex-01 ここまで↑ */
/* 【コンテンツ・ブロック .block-01 】 ここまで↑ */
/* -------------------- 【page-title.htmlの設定】 ここまで↑ -------------------- */
/* -------------------- 【スマートフォン向けの設定】 ここまで↑ -------------------- */



/* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここから↓ -------------------- */
@media (min-width : 600px) {
  /* タブレット版：コンテンツ内側の画面幅 */
  .width-01 {
    max-width : var();
  }

  .block-01 {
    margin : 0;
  }

/* タブレット用フォントサイズの設定 */
  body {
    font-size : 1.7rem;
  }
  /* -------------------- 【page-title.html】の設定 ここから↓ -------------------- */
  /* タブレット版 【コンテンツ・ブロック .bock-01】 ここから↓ */

  /* タブレット版 【コンテンツ・ブロック .bock-01】 ここまで↑ */
  /* -------------------- 【page-title.html】の設定  ここまで↑ -------------------- */
/* -------------------- 【タブレット向けの設定 画面幅が600px以上】 ここまで↑ -------------------- */


```ここに言語を入力
試してみたコード
.ctr-item-02 {
  position:relative;
}

.p-01 {
  height:10rem;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
}

.cake-01 {
  height:10rem;
  font-size:0;
  z-index:1;
  position:absolute;
  right:0;
  bottom:0;
}

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

回答1件

ベストアンサー

背景画像にするのが一番楽そうです。

css
1.p-01 {
2	height: 10rem;
3	/* position: absolute; */
4	/* left: 0; */
5	/* top: 0; */
6	/* z-index: 2; */
7	background: url(img/cake_01.jpg) right no-repeat; /* 追加 */
8}