html 父容器的背景消失了,为什么父元素设置了背景色后部分子元素被覆盖不可见...

如题，父元素一设置背景色就会覆盖了子元素，只有子元素设置z-index时才能显示，我想知道这是什么原因导致的，代码如下：

Document

* {

margin: 0;

padding: 0;

}

html,

body {

width: 100%;

height: auto;

font-family: 'Microsoft YaHei',

'微软雅黑',

"Microsoft JhengHei",

'华文细黑',

'STHeiti',

'MingLiu';

color: #2f363b;

box-sizing: border-box;

overflow-y: scroll;

font-size: 100px;

background: #f2f2f2;

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

/* 左浮动 */

.left {

float: left;

}

.right {

float: right;

}

/* 清除浮动 */

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

width: 0;

height: 0;

margin: 0;

padding: 0;

}

.clearfix:after {

clear: both;

}

/* 外框 */

#wrap {

box-sizing: border-box;

overflow: hidden;

}

.content {

padding: 0 0.17rem;

box-sizing: border-box;

}

.imgmd {

height: 100%;

width: 100%;

display: flex;

flex-direction: row;

/* justify-content: center; */

}

#yj {

text-align: center;

/* height: 4.15rem; */

padding-top: 0.75rem;

padding-bottom: 0.885rem;

/* background: #ffffff; */

}

#yj p.color-2f {

margin-bottom: 0.5rem;

font-size: 16px;

}

#yj .yj {

overflow-x: scroll;

overflow-y: hidden;

height: 1.89rem;

display: flex;

flex-direction: row;

justify-content: center;

font-size: 16px;

}

#yj .yj .scro {

width: 4.425rem;

height: 100%;

width: 400%;

display: flex;

flex-direction: row;

justify-content: flex-start;

}

#yj .yj div.left {

position: relative;

width: 1.375rem;

height: 1.825rem;

margin-right: 0.15rem;

/* transition: all 1s ease-in-out; */

z-index: -1;

/* width: 35%; */

flex-shrink: 0;

}

#yj .yj div.left .bgc-img {

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

background: pink;

}

#yj .yj .scro .bgc-img img {

width: 100%;

height: 100%;

}

#yj .yj div.left div.yj-font {

position: absolute;

width: 100%;

color: #58637e;

/* transition: all 1s ease-in-out; */

margin-top: 0.75rem;

padding: 0 0.1rem;

box-sizing: border-box;

}

#yj .yj div.yj_img1 div.yj-font p.f-26,

#yj .yj div.yj_img2 div.yj-font p.f-26 {

margin-bottom: 0.05rem;

line-height: 0.2rem;

}

#yj .yj div.yj_img3 div.yj-font p.f-26 {

/* margin-bottom: 0.3rem; */

margin-bottom: 0.1rem;

}

#yj .yj .scro .img1 {

/* transition: all 1s ease-in-out; */

margin: 0.2rem 0;

height: 0.41rem;

width: 0.41rem;

position: absolute;

left: 50%;

margin-left: -0.2rem;

}

#yj .yj div.yj_img3 {

margin-right: 0;

}

#yj .yj .img2 {

/* width: 24.375rem; */

/* height: 32.0625rem; */

/* transform: translateZ(0); */

transform: scale(1.05);

/* margin-right: 1.75rem; */

}

#yj .yj .scro .yj-font p.f-22,

#yj .yj div.yj_img3 .yj-font p.f-22 {

line-height: 0.2rem;

}

#yj .yj .img2:last-child,

#yj .yj .img1:last-child {

margin-right: 0;

}

XXXXXX

XXX
XXXXX

XXXXXXXXX
XXXXXXXXX

XXX
XXXXX

XXXXXXXXXX

XXXXXXXXXX

XXXXXXXXXXXXXXX
XXXXXXXXXX