Question 264866 in Html Question posted in
Some basic documentation can be found here.

Html – Why z-index is behaving in this peculiar way for this particular situation

I know the basics of z-index and was practicing with it and wrote below code:

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #141214;
        }

        .card{
            /* position: relative; */
            width: 350px;
            height: 450px;
            background-color: #282729;
            border-radius: 15px;
            z-index: 1;        }
        .img{
            position: relative;
            width: 80%;
            background-color: #AAA;
            /* z-index: 1; */
        }
        .img::before{
            position: absolute;
            content: '';
            left: -70%;
            top: 10%;
            width: 350px;
            height: 350px;
            background-color: #9BDB23;
            z-index: -1;
        }
        img{
            max-width: 100%;
        }
<div class="card">
        <div class="img">
            <img src="shoes.png" alt="A Shoe">
        </div>
        <div class="content">
            <h3>Nike Shoes</h3>
            <div class="size">
                <p>size</p>
                <a href="#" class="size">7</a>
                <a href="#" class="size">8</a>
                <a href="#" class="size">9</a>
                <a href="#" class="size">10</a>
            </div>
            <div class="color">
                <p>color</p>
                <div class="color green"></div>
                <div class="color blue"></div>
                <div class="color red"></div>
            </div>
            <a href="#" class="buy">buy now</a>
        </div>
    </div>

Now, the main problem is:
(1) When img::before has been assigned z-index: -1, then it is sent behind .card (as per docs, any element with negative z-index in sent behind its parent. But, here, .img is the immediate parent container so why ::before is sent behind .card and not behind .img?)

(2) When img::before has been assigned z-index: -1 and .card z-index: 1, then the ::before is sent behind both .img and .content

(3) When img::before has been assigned z-index: -1, .card z-index: 1 (optional) and .img z-index: 1, then ::before is sent behind but above .img.

In this way there are other combinations of z-indexes for this scenario which is proving difficult for me. Can somebody help me with this?

Tags:

3

Answers


  1. 0

    (1)

    <div class="card">
        <div class="img">
            <img src="shoes.png" alt="A Shoe">

    In here card is the parent and img is a child.

    Login or Signup to reply.
  2. 0 
      * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #141214;
        }

        .card {
            width: 350px;
            height: 450px;
            background-color: #282729;
            border-radius: 15px;
        }

        .img {
            position: relative;
            width: 80%;
            background-color: #AAA;
            z-index: 1;
        }

        .img::before {
            position: absolute;
            content: '';
            left: -70%;
            top: 10%;
            width: 350px;
            height: 350px;
            background-color: #9BDB23;
            z-index: -1;
        }

        img {
            max-width: 100%;
        }

        .content {
            text-align: center;
            padding: 20px;
            color: #fff;
        }
     <div class="card">
        <div class="img">
            <img src="shoes.png" alt="A Shoe">
        </div>
        <div class="content">
            <h3>Nike Shoes</h3>
            <div class="size">
                <p>size</p>
                <a href="#" class="size">7</a>
                <a href="#" class="size">8</a>
                <a href="#" class="size">9</a>
                <a href="#" class="size">10</a>
            </div>
            <div class="color">
                <p>color</p>
                <div class="color green"></div>
                <div class="color blue"></div>
                <div class="color red"></div>
            </div>
            <a href="#" class="buy">buy now</a>
        </div>
    </div>

    With this CSS, the ::before pseudo-element will appear behind both .img and .content because they share the same stacking context defined by .img

    Login or Signup to reply.
  3. 0

    One of your problems is the <img> element doesn’t support ::before or ::after.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search