Указание любого положительного значения для z-index не влияет на целевой элемент. Почему? ⇐ CSS

[Anonymous]

Я хочу создать простой вид карточки с наклоненным элементом div, который должен находиться в верхнем левом углу карточки. Это мой код:
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);
}

Мой результат



Подробнее здесь: https://stackoverflow.com/questions/783 ... lement-why