z-indexで親要素の背景に潜り込ませたい

Question

前提・実現したいこと

下記のようなデザインをCSSで表現しようとしたのですが、後ろの棒が上に来てしまって、対処法が分からないので教えてください

該当のソースコード

<div class="box">
    <div class="parent">20<br><span>1月</span></div>
</div>

.parent {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  border: 5px solid $green;
  background: #fff;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  font-size: 30px;
  position: relative;
  // z-index:1;
  // z-index:100;

//  &::before{
  &::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5px;
    height: 120px;
    border-radius: 100px;
    background: $green;
    // z-index:0;
    // z-index:-1;
    // z-index:10; // 親要素はこれよりも大きく設定
  }

  span {
    font-size: 15px;
    position: absolute;
    bottom: 5px;
  }
}

試したこと

一応、一通り試したのですが、背景の下には潜り込ませることはできなかったです。
コメントアウトしてる場所は試したコードです。
この場合、親要素の上に、また親要素を作ってしまい、そこに装飾するのが吉なのでしょうか？
bodyにはbackgroundをつけているので、子要素だけにz-indexをマイナス値入れると、bodyのbackgroundよりも後ろに行ってしまい見れないようです。
ご教示よろしくお願いいたします。

Answer 1

z-indexにマイナス値を指定すると、Nero1129さんが見ているように
bodyのbackgroundの背面に表示されるため扱いにくいです。

::after、::before、を使用しない方向を提示しますので、
解決できなかった場合、試してください。

<div class="box">
    <div class="line"></div>
    <div class="parent">20<br><span>1月</span></div>
</div>

.parent {
    // width: 80px;
    // height: 80px;
    border-radius: 100px;
    border: 5px solid $green;
    background: #fff;
    display: flex;
    justify-content: center;
    padding-top: 5px;
    font-size: 30px;
    position: relative;

    span {
      font-size: 15px;
      position: absolute;
      bottom: 5px;
    }
}

// 追加
.box {
  position: relative; // absoluteでも可
  width: 80px;
  height: 80px;
}
.line {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5px;
    height: 120px;
    border-radius: 100px;
    background: $green;
}
.parent {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

Comments

[Nero1129]

やはりその方法が最適なんですね。
あまり余計なタグを増やしたくないので、やりたくなかったのですが仕方がないですね。
.lineの内容をafterで表現してz-indexで調節できたので、今回はnew1ro様の回答をベストアンサーとさせていただきます。

[new1ro]

::afterを追加するなら、.boxにするのが適切と考えます。
そうすると「::after」と「.parent」を兄弟要素になるので、z-indexでの前面 / 背面の表示順番を制御できます。

Answer 2

まず、同じposition値、z-index値を持つ要素同士は、基本はHTML上、下行の要素がレイヤー的に上になる仕様になっていますので、潜り込ませたい要素は、beforeの方が、上手くいくかと思います。
その上で、下記スタイルをお試し下さい。

.parent {
  // 他のプロパティは省略
  z-index: 1;
  &::before {
    // 他のプロパティは省略
    z-index: -1;
  }
  // 他は省略

}

Comments

[Nero1129]

それもやったんですけど、全然微動だにせず改善されなかったです。
一応確認のために今さっき書きましたが、全然ダメでした

[miyabi_pudding]

やったことは全部質問文に記載していただかないと、誰も知りようがありません。
質問文に試したことは全て書き出してください。

Answer 3

親要素の.parentsにはz-indexを指定せず、疑似要素の::afterにz-index: -1を入れるだけでできると思います。

  &::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5px;
    height: 120px;
    border-radius: 100px;
    background: $green;
    // z-index:0;
    z-index:-1;  // ここだけ復活
    // z-index:10; // 親要素はこれよりも大きく設定
  }

参考サイト

Comments

[Nero1129]

https://gyazo.com/620f891240791de9a338a8b0efbd09b9

それも行いました
Bodyよりも下に埋もれちゃう感じなんですよね
2年くらいCSS書いてますが、z-indexだけは苦手です

[vnsa7221]

そうでしたか。
手元でcodepenを用いてコードをコピーして確認しましたが、bodyに埋もれるというようなことは特に発生しなかったので、bodyで設定されているcssに何か原因があるかもしれないです。

この部分は推測になってしまうので正確な回答ができないです。
申し訳ないです

[Nero1129]

bodyのbackgroundを外せば透過されるので見えるのですが、backgroudを外すわけにはいかなので、なんとか回避方法があればと思い、質問させていただきました。