Why the "z-index" is being ignored? Elements are only coming foward partially

Question

As you guys can see in this chunk of code, when I hover over some <li> element, the element is not overlaying. I mean, at least, not completely. Yes, the top is coming foward, but the bottom of the item doesn't. I don't know why. I mean, I specifically put this code below trying to solve this:

ul li:hover{
z-index: 10;}

So it was supposed to come foward, but it doesn't. Anyone have any idea why?

body,html{
    height:100%;
    margin:0;
}


ul {
    list-style-type: none;
}

ul li{
    display: grid;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transform: rotateY(-22deg) rotateX(7deg);
    border-bottom: 4px solid rgba(0,0,0,0.2);
    align-items: center;
}

ul li p{
    padding: 1rem;
}

.li1{
    background-color: rgba(37, 187, 112);
    color: white;
    z-index:1;

}

.li2{
    background-color: rgb(154, 169, 168);
    color: white;
    font-weight: 500;
    z-index:1;
}

.li3{
    background-color: rgb(89, 188, 224);
    color:white;
    z-index:1;
}



ul li:hover{
    transform: rotateY(0) rotateX(3deg) scale(1.1);
    transition: transform .4s ease-out;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="art1"></div>
    <div class="art2"></div>

    <div class="container">

        <div class="right">
            <ul class="main_list">
                <li class="li-el li1">
                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
                <li class="li-el li2">

                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
                <li class="li-el li3">

                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
            </ul>
        </div>

    </div>
</body>
</html>

It's because of the `rotateX`. You should keep a `translateZ` for the `hover`. `z-index` has no effect in 3D — Rojo, Feb 05 '21 at 19:18

score 1 · Accepted Answer · answered Feb 05 '21 at 19:21

z-index only work for non static positioned elements. Just add position:relative for the li. Working example below.

(I also moved there the transition from the :hover style to general style, so the transition works in both directions - on scale and scale back)

body,html{
    height:100%;
    margin:0;
}


ul {
    list-style-type: none;
}

ul li{
    display: grid;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transform: rotateY(-22deg) rotateX(7deg);
    border-bottom: 4px solid rgba(0,0,0,0.2);
    align-items: center;
    position:relative;
    transition: transform .4s ease-out;
}

ul li p{
    padding: 1rem;
}

.li1{
    background-color: rgba(37, 187, 112);
    color: white;
    z-index:1;

}

.li2{
    background-color: rgb(154, 169, 168);
    color: white;
    font-weight: 500;
    z-index:1;
}

.li3{
    background-color: rgb(89, 188, 224);
    color:white;
    z-index:1;
}



ul li:hover{
    transform: rotateY(0) rotateX(3deg) scale(1.1);
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="art1"></div>
    <div class="art2"></div>

    <div class="container">

        <div class="right">
            <ul class="main_list">
                <li class="li-el li1">
                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
                <li class="li-el li2">

                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
                <li class="li-el li3">

                    <p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
                </li>
            </ul>
        </div>

    </div>
</body>
</html>

Why the "z-index" is being ignored? Elements are only coming foward partially

1 Answers1