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

前提・実現したいこと

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

該当のソースコード

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

scss
1.parent {
2  width: 80px;
3  height: 80px;
4  border-radius: 100px;
5  border: 5px solid $green;
6  background: #fff;
7  display: flex;
8  justify-content: center;
9  padding-top: 5px;
10  font-size: 30px;
11  position: relative;
12  // z-index:1;
13  // z-index:100;
14
15//  &::before{
16  &::after {
17    content: "";
18    position: absolute;
19    display: block;
20    top: 0;
21    bottom: 0;
22    right: 0;
23    left: 0;
24    margin: auto;
25    width: 5px;
26    height: 120px;
27    border-radius: 100px;
28    background: $green;
29    // z-index:0;
30    // z-index:-1;
31    // z-index:10; // 親要素はこれよりも大きく設定
32  }
33
34  span {
35    font-size: 15px;
36    position: absolute;
37    bottom: 5px;
38  }
39}

試したこと

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

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

回答3件

ベストアンサー

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

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

HTML
1<div class="box">
2    <div class="line"></div>
3    <div class="parent">20<br><span>1月</span></div>
4</div>

SCSS
1.parent {
2    // width: 80px;
3    // height: 80px;
4    border-radius: 100px;
5    border: 5px solid $green;
6    background: #fff;
7    display: flex;
8    justify-content: center;
9    padding-top: 5px;
10    font-size: 30px;
11    position: relative;
12
13    span {
14      font-size: 15px;
15      position: absolute;
16      bottom: 5px;
17    }
18}
19
20// 追加
21.box {
22  position: relative; // absoluteでも可
23  width: 80px;
24  height: 80px;
25}
26.line {
27    position: absolute;
28    display: block;
29    top: 0;
30    bottom: 0;
31    right: 0;
32    left: 0;
33    margin: auto;
34    width: 5px;
35    height: 120px;
36    border-radius: 100px;
37    background: $green;
38}
39.parent {
40    width: 100%;
41    height: 100%;
42    box-sizing: border-box;
43}
44

投稿2020/08/05 09:11

new1ro

総合スコア4528

Nero1129

2020/08/05 09:38

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

new1ro

2020/08/05 09:41 編集

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

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

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

scss
1.parent {
2  // 他のプロパティは省略
3  z-index: 1;
4  &::before {
5    // 他のプロパティは省略
6    z-index: -1;
7  }
8  // 他は省略
9
10}
11

投稿2020/08/05 03:32

miyabi_pudding

総合スコア9555

Nero1129

2020/08/05 03:37

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

miyabi_pudding

2020/08/05 03:40

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

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

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

scss
1  &::after {
2    content: "";
3    position: absolute;
4    display: block;
5    top: 0;
6    bottom: 0;
7    right: 0;
8    left: 0;
9    margin: auto;
10    width: 5px;
11    height: 120px;
12    border-radius: 100px;
13    background: $green;
14    // z-index:0;
15    z-index:-1;  // ここだけ復活
16    // z-index:10; // 親要素はこれよりも大きく設定
17  }