为何设置z-index无法让tilted_div显示在card上方？

我想要创建一个简易卡片视图，同时在card的左上角放置一个倾斜的div。当前输出中，tilted_div显示在card下方，我希望它能显示在card上方，但无论设置多大的z-index都没有效果。

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);
}

核心问题 #

问题出在两个关键点：

1. .card的overflow: hidden属性：你把tilted_div放在了card内部，而card设置了overflow: hidden，导致tilted_div超出card边界的部分（top: -30px、left: -20px的区域）被直接裁剪，看起来就像是被card盖住了——调整z-index没用，因为裁剪是在渲染前就发生的，层级再高也显示不出来。
2. 定位容器的选择：tilted_div是绝对定位元素，它的定位参考是父级的card，但card的裁剪规则限制了它的显示范围。

解决方案 #

有两种可行的修复方式，根据你的需求选择：

方式一：保留card的overflow: hidden（适合需要裁剪卡片内部内容的场景）

把tilted_div从card内部移到cardItem中，作为card的同级元素，同时给cardItem添加position: relative作为定位参考：

1. 修改CSS，给.cards_item添加定位属性：

.cards_item {
    display: flex;
    padding: 1rem;
    width: 70%;
    position: relative; /* 添加这行，作为tilted_div的定位容器 */
}

2. 修改JS中的元素挂载顺序，把tilted_div挂载到cardItem而不是card：

// 替换原来的card.appendChild(tiltedDiv);
cardItem.appendChild(tiltedDiv);
cardItem.appendChild(card);

方式二：移除card的overflow: hidden（适合不需要裁剪卡片内部内容的场景）

直接删掉.card中的overflow: hidden属性：

.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%;
}

这样tilted_div超出card的部分就不会被裁剪，同时因为它是绝对定位且z-index:1，会显示在card的上方。

内容的提问来源于stack exchange，提问作者Abhishek