z-indexでの重なり順指定がうまくいかない

Question

質問内容 ： z-indexを用いてimgの重なり順を一番下にしたいのですが、
うまくいかず、h2やpの上にきてしまっている状況をなおしたい。

利用環境 ： Brackets最新

試したこと ： z-indexの値を0にし、position:absoluteを指定、
親要素にposition:relativeを指定しました。

※現状のコードでサイト表示させた際の
画面サンプルを添付いたしました。

また、以下HTMLとCSSの質問箇所コードを表記しました。

お手数ですが、ご回答いただければ幸いです。
よろしくお願いいたします。

<div class="message-wrapper">
            <div class="container">
                <div class="messages">
                    <h2>●○○○○<br>●○○○○●○○○○</h2>
                    <p>●○○○○<br>●○○○○●○○○○</p>
                    <img class="point01" src="●○○○○">
                </div>
            </div>
        </div>

body {
  margin: 0;
  font-family: "Hiragino Mincho ProN";
}
a {
  text-decoration: none;
}
.container {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    font-weight: normal;
}

.message-wrapper {
    padding-top: 100px;
}
.messages {
    text-align: center;
    color: forestgreen;
    position: relative;
}
.point01 {
    width: 300px;
    position: absolute;
    top: 110px;
    left: 100px;
    z-index: 0;
}
.messages h2 {
    line-height: 50px;
    font-weight: bold;
    padding-top: 100px;
    font-size: 26px;
    letter-spacing: 8px;
}
.messages p {
    letter-spacing: 5px;
    font-size: 14px;
    color: dimgrey;
    line-height: 30px;
}

Answer 1

 .point01 {
    width: 300px;
    position: absolute;
    top: 110px;
    left: 100px;
    z-index: -1; /* 修正 */
}

Answer 2

.messages {
  text-align: center;
  color: forestgreen;
}

.messages * {
  position: relative;
  z-index: 1;
}