undefinedfix
Sign in

Why is the background color set for the parent element and the rear molecular element covered and invisible

Grych edited in Wed, 21 Sep 2022

As shown in the title, when the parent element sets the background color, it will cover the child element. Only the child element sets Z - Index. I want to know what causes this. The code is as follows:

clipboard.pngclipboard.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <section id="yj" class="content">
            <p class="color-2f f-40 ft-weight">XXXXXX</p>
            <div class="yj">
                <div class="imgmd">
                    <div class="scro">
                        <div class="yj_img1 left">
                            <div class="bgc-img">
                                <img src="img/index/brokerage_bg1.png" alt="背景图1">
                            </div>
                            <img class="img1 " src="img/index/brokerage_icon1.png" alt="XXXX">
                            <div class="yj-font">
                                <p class="f-26 color-33">XXX<br>XXXXX</p>
                                <p class="f-22 color-66 lh-30">XXXXXXXXX<br>XXXXXXXXX</p>
                            </div>

                        </div>
                        <div class="yj_img2 left">
                            <div class="bgc-img">
                                <img src="img/index/brokerage_bg2.png" alt="背景图2">
                            </div>
                            <img class="img1 " src="img/index/brokerage_icon2.png" alt="XXXXX">
                            <div class="yj-font">
                                <p class="f-26 color-33">XXX<br>XXXXX</p>
                                <p class="f-22 color-66 lh-30">XXXXXXXXXX</p>
                            </div>
                        </div>
                        <div class="yj_img3 left">
                            <div class="bgc-img">
                                <img src="img/index/brokerage_bg3.png" alt="背景图3">
                            </div>
                            <img class="img1 " src="img/index/brokerage_icon3.png" alt="XXXXX">
                            <div class="yj-font">
                                <p class="f-26 color-33">XXXXXXXXXX</p>
                                <p class="f-22 color-66 lh-30">XXXXXXXXXXXXXXX<br>XXXXXXXXXX</p>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </section>
    </div>

</body>

</html>
2 Replies
amyiris
commented on Wed, 21 Sep 2022

You set the Z-index of the subelement to - 1

tanish
commented on Wed, 21 Sep 2022

#yj .yj div.left And # YJ. YJ div.left Z-index in. BGC img