Giving any positive value for z-index doesn't impact the target element. Why?

I want to create a simple card view along with a tilted div which should be on the top left corner of the card. This is my code:

CSS

       .cards_item {
            display: flex;
            padding: 1rem;
            width: 70%;
        }

        .card {
            position: relative;
            background-color: white;
            border-radius: 0.25rem;
            box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 0;
            width: 100%; /* Make each card take full width */
        }

        .card_content {
            padding: 1rem;
            background: linear-gradient(to bottom left, rgb(52, 93, 226) 40%, rgb(99, 124, 204) 100%);
            height: 100%;
        }

        .card_title {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: capitalize;
            margin: 0px;
        }

        .card_text {
            color: #ffffff;
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1.25rem;    
            font-weight: 400;
        }

        .tilted_div {
            position: absolute;
            top: -30px; 
            left: -20px; 
            padding: 10px;
            width: fit-content;
            background-color: #ec3535;
            border: 2px solid #ccc;
            transform: rotate(-45deg);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);
            color: white;
        }

JS

        function createCard(arr,lst){ 
            const cardItem = document.createElement('li');
            cardItem.classList.add('cards_item');

            const card = document.createElement('div');
            card.classList.add('card');

            const cardImage = document.createElement('div');
            cardImage.classList.add('card_image');
            const img = document.createElement('img');
            if(arr[2].includes("pdf"))
                img.src = "/images/pdf_gif.gif";
            else
                img.src = "/images/webportal_gif.gif";
            cardImage.appendChild(img);

            const cardContent = document.createElement('div');
            cardContent.classList.add('card_content');

            const cardTitle = document.createElement('h2');
            cardTitle.classList.add('card_title');
            cardTitle.textContent = arr[0].toUpperCase(); // Set the title dynamically

            const cardText = document.createElement('p');
            cardText.classList.add('card_text');
            cardText.textContent = arr[1]; // Set the description dynamically

            const btn = document.createElement('button');
            btn.classList.add('btn', 'card_btn');
            btn.textContent = 'Download';

            btn.addEventListener('click', function () {
                // Create an anchor element
                const downloadLink = document.createElement('a');
                downloadLink.style.display = 'none'; // Hide the anchor element

                // Extract filename from URL
                const url = arr[2]; // Assuming arr[2] contains the PDF file URL
                const filename = url.split('/').pop(); // Extract filename from URL

                // Set the download attribute and href for the PDF file
                downloadLink.download = filename; // Set the filename
                downloadLink.href = url; // Set the PDF file URL

                // Append the anchor element to the body
                document.body.appendChild(downloadLink);

                // Trigger a click on the anchor to initiate the download
                downloadLink.click();

                // Remove the anchor element from the body
                document.body.removeChild(downloadLink);
            });

            const tiltedDiv = document.createElement('div');
            tiltedDiv.innerText = arr[6];
            tiltedDiv.classList.add('tilted_div'); 

            // Append elements to the card
            cardContent.appendChild(cardTitle);
            cardContent.appendChild(cardText);
            cardContent.appendChild(btn);

            card.appendChild(tiltedDiv);
            card.appendChild(cardImage);
            card.appendChild(cardContent);

            cardItem.appendChild(card);
            
            lst.appendChild(cardItem);
        }

My output

As you can see the tilteddiv (marked by the red arrow) is showing to be under the card. I want it above the card. No matter whatever z-index I give to the tilteddiv, it doesn’t make any difference. Where am I going wrong? Please help me.

Edit

This is my generated HTML code:

>Solution :

You are adding your .tilted_div into .card (card.appendChild(tiltedDiv);).

But your .card has overflow: hidden; set, so it means any child element that is outside .card box will be cut off.

So that’s what is happening, it’s not z-index problem, it’s overflow problem. You should remove overflow: hidden; from .card in order for .tilted_div to be fully visible