z-indexでCSSの優先順位を指定しても反映されない

前提・実現したいこと

①文字列
②背景透過
③背景画像
の順でCSSを適用したい

発生している問題・エラーメッセージ

②背景透過の優先順位が③背景よりも下になってしまう

該当のソースコード

html
1  <div class="profilePage">
2    <div class="backgorund_img">
3      <img :src="backgorund_img" alt="icon" width="100%" height="100%">
4    </div>
5    <div class="top_body">
6      <div>
7        <p>TANAKA</p><br>
8      </div>
9      <div class="bkRGBA">
10        <div class="icon_name">
11          <img :src="myPhoto" alt="icon" width="70px" height="70px">
12          <p>HANAKO</p>
13        </div>
14      </div>
15      <div class="personalData">
16        <p>AAAAAAAA</p><br>
17        <p>BBBBBBBB</p><br>
18        <p>CCCCCCCC</p><br>
19        <p>DDDDDDDD</p><br>
20        <p>EEEEEEEE</p><br>
21        <p>FFFFFFFF</p>
22      </div>
23    </div>
24  </div>

CSS
1  .backgorund_img{
2    position: absolute;
3    background-color:rgba(255,255,255,0.8) !important;
4    z-index:1;
5　}
6
7  .bkRGBA{
8    height: 100%;
9    background-color:rgba(255,255,255,0.8);
10    z-index:2;
11  }
12
13  .top_body{
14    position: relative;
15    line-height: 1%;
16    font-size: 60%;
17    padding-left: 5%;
18    padding-top: 5%;
19    z-index:3;
20  }

試したこと

z-indexで優先順位を指定

kszk311

2018/08/29 03:59

該当部分のHTMLも記載してください。

yukihisa

2018/08/29 04:04

上二つカッコが閉じられてません。

yukihisa

2018/08/29 04:31

再現してみましたが特におかしな部分は見受けられません。どの部分がどうなって欲しいのか、もっと具体的にお願いします。

tsu2626

2018/08/29 04:44

優先順位が反映されていないように感じたのは、height: 100%;で<div class="bkRGBA">の部分が表示されていないことが原因でした。

yukihisa

2018/08/29 04:45

でした？解決してる？

yoshinavi

2018/08/29 05:03

①②③がどれに該当するのか明確にされた方が良いかと思います。提示のコードだと各イメージは表示されていないのでは？

yukihisa

2018/08/29 05:21

別画像に変更してみてもとくに違和感なかったんですよね。。。どうなって欲しいのかがいまいちわからない。

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

回答1件

ベストアンサー

現状のコードを少し手直し（色付け等）すると，このようになります

html
1<div class="profilePage">
2  <div class="backgorund_img">
3    <img src="http://placehold.jp/48cdd4/ffffff/400x400.png" alt="icon" width="100%" height="100%">
4  </div>
5  <div class="top_body">
6    <div><p>TANAKA</p><br><!--br要らないのでは？∵自動改行される--></div>
7    <div class="bkRGBA">
8      <div class="icon_name">
9        <img src="https://placehold.jp/ff6347/ffffff/100x100.png" alt="icon" width="100px" height="100px">
10        <p>HANAKO</p>
11      </div>
12    </div>
13    <div class="personalData">
14      <p>AAAAAAAA</p><br><!--br要らないのでは？∵自動改行される-->
15      <p>BBBBBBBB</p><br><!--br要らないのでは？∵自動改行される-->
16      <p>CCCCCCCC</p><br><!--br要らないのでは？∵自動改行される-->
17      <p>DDDDDDDD</p><br><!--br要らないのでは？∵自動改行される-->
18      <p>EEEEEEEE</p><br><!--br要らないのでは？∵自動改行される-->
19      <p>FFFFFFFF</p>
20    </div>
21  </div>
22</div>

css
1.profilePage{
2  background: palegreen;
3}
4.backgorund_img{
5  position: absolute;
6  background-color:rgba(255,255,255,0.8) /*!important*/;
7  z-index:1;
8}
9.bkRGBA{
10  height: 50%;
11  background-color:rgba(255,255,255,0.5);
12  z-index:2;
13}
14.top_body{
15  position: relative;
16  line-height: 1%;
17  font-size: 60%;
18  padding-left: 5%;
19  padding-top: 5%;
20  z-index:3;
21  background-image:
22    linear-gradient(55deg, rgba(255,255,255,0) 49%, #999 49%, #999 51%, rgba(255,255,255,0) 51%),
23    linear-gradient(-55deg, rgba(255,255,255,0) 49%, #999 49%, #999 51%, rgba(255,255,255,0) 51%);
24  width: 50%;
25  border: 10px solid #999;
26}

コード中のz-indexの値から察するに，質問者さんは，灰色のボックスが，内包要素よりも前にくるようにしたいようですが，そのボックスを前に動かせば，当然，内包要素も前に出てきます．（要素を内包する，というのは，大きな積み木の上に，小さな積み木を乗せるようなものであるため，このようになります）

[CSS] z-index とスタックコンテキスト

これを解決するにはどうすれば良いでしょうか？

親要素の背後に子要素を置く方法

基本的に、子要素のpositionにstatic以外を設定してz-indexに負の整数値を設定すれば、子要素が親要素の背後に置かれる。

ただし、親要素のpositionにstatic以外を設定してz-indexに任意の整数値を設定すると、子要素は親要素が設置したスタッキングコンテキストに属することになるために、子要素が親要素の背後に回らなくなる。

HTMLの構造上，灰色のボックスにabsoluteを指定せざるを得ないため，HTMLを修正する必要があります
また，背景画像はimg要素を使わずとも，background-imageで指定できます

このようにするとどうでしょうか？（HTML,CSSともに手を入れています）

html
1<div class="profilePage">
2  <div class="top_body">
3    <p>TANAKA</p>
4    <div class="bkRGBA">
5      <div class="icon_name">
6        <img src="https://placehold.jp/ff6347/ffffff/100x100.png" alt="icon" width="100px" height="100px">
7        <p>HANAKO</p>
8      </div>
9    </div>
10    <div class="personalData">
11      <p>AAAAAAAA</p>
12      <p>BBBBBBBB</p>
13      <p>CCCCCCCC</p>
14      <p>DDDDDDDD</p>
15      <p>EEEEEEEE</p>
16      <p>FFFFFFFF</p>
17    </div>
18  </div>
19</div>

css
1.profilePage{
2  background: palegreen url("http://placehold.jp/48cdd4/ffffff/400x400.png") center center / cover;
3  position: relative;
4  z-index: -2;
5}
6.bkRGBA{
7  position: relative;
8  z-index: -1;
9  height: 50%;
10  background-color:rgba(255,255,255,0.5);
11}
12.top_body{
13  line-height: 1%;
14  font-size: 60%;
15  padding-left: 5%;
16  padding-top: 5%;
17  background-image:
18    linear-gradient(55deg, rgba(255,255,255,0) 49%, #999 49%, #999 51%, rgba(255,255,255,0) 51%),
19    linear-gradient(-55deg, rgba(255,255,255,0) 49%, #999 49%, #999 51%, rgba(255,255,255,0) 51%);
20  width: 50%;
21  border: 10px solid #999;
22}