::beforeを使うとその子要素が消えてしまう。

前提・実現したいこと

↓図のようなことを実現したいです。

↓現状ここまではできています。

あとは十字（T字）を作るだけです。
作戦として、各セルごとに背景色と同じ角丸を枠線と同じ大きさで
描画してから子要素（赤い四角）を描画しようとしました。

発生している問題

↓しかし、実際にはうまくいかず、図のように子要素（赤い四角）がなぜか消えてしまいます。

質問事項

・子要素（赤い四角）はどこに行ってしまったのですか？
・（任意）角丸作戦より簡単な作戦があったら教えてください

ピンとこない説明で申し訳ないのですが、あとのことは文章で説明するよりも
コードを読んでいただいたほうがわかりやすいと思います。

該当のソースコード

↓index.html

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Sample</title>
8  <link rel="stylesheet" href="index.css">
9</head>
10
11<body>
12  <table class="tbl">
13    <tr>
14      <td class="cell">
15        <div class="child"></div>
16      </td>
17      <td class="cell">
18        <div class="child"></div>
19      </td>
20    </tr>
21    <tr>
22      <td class="cell">
23        <div class="child"></div>
24      </td>
25      <td class="cell">
26        <div class="child"></div>
27      </td>
28    </tr>
29  </table>
30</body>
31
32</html>

↓index.css

css
1:root {
2  --cell-size: 12vmin;
3}
4
5.tbl {
6  border-collapse: collapse;
7}
8
9.cell {
10  margin: 0;
11  padding: calc(var(--cell-size) * 0.2);
12  position: relative;
13  border: thin solid #333;
14  width: var(--cell-size);
15  height: var(--cell-size);
16}
17
18.cell::before {
19  position: absolute;
20  left: -1px;
21  top: -1px;
22  width: calc(100% + 2px);
23  height: calc(100% + 2px);
24  border-radius: calc(var(--cell-size) * 0.1);
25  content: "";
26  background: white; /*背景色で上書きすることで十字（T字）を作る*/
27}
28
29.child {
30  margin: 0;
31  padding: 0;
32  width: 100%;
33  height: 100%;
34  background: red;
35}

試したこと

・z-indexをいじる
・!importantしてみる
・::afterに変えてみる

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

回答2件

ベストアンサー

こちらでどうでしょうか。
サンプル
 サンプル2

css
1:root {
2  --cell-size: 12vmin;
3  --kagi-size: 5px;
4}
5
6.tbl {
7  border-collapse: collapse;
8}
9
10.cell {
11  position: relative;
12  z-index: 1;
13  width: var(--cell-size);
14  height: var(--cell-size);
15  padding: calc(var(--cell-size) * .2);
16  border: 1px solid #333;
17}
18
19.cell::before,
20.cell::after {
21  position: absolute;
22  z-index: -1;
23  background-color: #fff; 
24  content: '';
25}
26
27.cell::before {
28  top: var(--kagi-size);
29  bottom: var(--kagi-size);
30  left: -1px;
31  width: calc(100% + 2px);
32}
33
34.cell::after {
35  top: -1px;
36  right: var(--kagi-size);
37  left: var(--kagi-size);
38  height: calc(100% + 2px);
39}
40
41.child {
42  width: 100%;
43  height: 100%;
44  background: red;
45}

投稿2020/10/10 10:30

編集2020/10/10 11:20

takopo

総合スコア484

chankane

2020/10/10 11:06

ご回答ありがとうございます。コードを拝見させていただきました。ミソはここですね。・.cellにz-index=1 ・.cellの議事要素にz-index=-1 上記のコードを取り込むことで、とりあえず解決しました。大変ありがとうございます。ただ、なぜこれで動作するのかわからなかったりします。「それは別の質問で」ということでなければ教えていただけませんか？

-millmill-

2020/10/10 11:12

z-index は position要素の重なり順を指定します

takopo

2020/10/10 11:32

サンプルでは疑似要素で作った横の長方形（before）と縦の長方形（after）を重ねて、角だけを見えるようにしています。長方形はカギかっこの分だけ幅を狭めて kagi-size で幅を調節できるようにしました。 .cell のほうが .child より上にあるので、このままでは白い長方形のほうが上に来て赤い四角が見えなくなってしまいます。なので、z-index で .child が上になるように重なり順を変えています。色付けしたサンプルを載せましたので、こちらを見ていただければどんなふうになってるかたぶんわかると思います。

chankane

2020/10/10 11:40

＞.cell のほうが .child より上にあるので… 「え、そうなの？子要素に指定しているのに？」と思って調べてみましたが、やっと合点が行きました。 positionに何かを指定すると自動的により上の階層に移動してしまうのですね。何もしていない項目(static)よりも。やっと引っかかっていた部分がわかりました。本当にありがとうございます。

takopo

2020/10/10 11:50 編集

すみません間違えました。.child のほうが上でしたね・・・疑似要素に　position: absolute;　を指定することで、一番上に来てしまうというのが正しいです。それを z-index: -1; で .cell の最下層に移動させることで、赤い四角が上にくるようにしてます。

-millmill-

2020/10/10 12:23

補足です^^ 親要素にz-indexを入れると子要素はそのレベルを引き継ぎます。疑似要素は一番上のレベルになる為に、子要素を隠してしまいます。但し、親要素にz-indexを入れ疑似要素にマイナスレベルのz-indexを入れた場合親要素は疑似要素の下に入るようになります。

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