my cards are not coming in front of the other cards when i drag them

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Card Deck Arrangement</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #007700;
display: flex;
flex-direction: column;
align-items: center;
}
#workspace {
width: 98vw;
height: 80vh;
border: 2px solid #000;
position: relative;
background-color: #008000;
margin-top: 20px;
overflow: hidden;
}
.card {
position: absolute;
cursor: grab;
user-select: none;
transition: transform 0.2s ease-in-out;
}
</style>
</head>

<body>
<div>
<button onclick="addCard()">Add Card</button>
<button onclick="addAllCards()">Add All Cards</button>
<button onclick="deleteSelectedCard()">Delete Selected Card</button>
<button onclick="deleteAllCards()">Delete All Cards</button>
</div>

<div id="workspace"></div>

<script>
const cardNames = [
'clubs_2.png', 'clubs_3.png', 'clubs_4.png', 'clubs_5.png', 'clubs_6.png',
'clubs_7.png', 'clubs_8.png', 'clubs_9.png', 'clubs_10.png', 'clubs_ace.png',
'clubs_jack.png', 'clubs_queen.png', 'clubs_king.png',
'diamonds_2.png', 'diamonds_3.png', 'diamonds_4.png', 'diamonds_5.png', 'diamonds_6.png',
'diamonds_7.png', 'diamonds_8.png', 'diamonds_9.png', 'diamonds_10.png', 'diamonds_ace.png',
'diamonds_jack.png', 'diamonds_queen.png', 'diamonds_king.png',
'hearts_2.png', 'hearts_3.png', 'hearts_4.png', 'hearts_5.png', 'hearts_6.png',
'hearts_7.png', 'hearts_8.png', 'hearts_9.png', 'hearts_10.png', 'hearts_ace.png',
'hearts_jack.png', 'hearts_queen.png', 'hearts_king.png',
'spades_2.png', 'spades_3.png', 'spades_4.png', 'spades_5.png', 'spades_6.png',
'spades_7.png', 'spades_8.png', 'spades_9.png', 'spades_10.png', 'spades_ace.png',
'spades_jack.png', 'spades_queen.png', 'spades_king.png'
];

let selectedCard = null;
let cardCount = 0;
const maxCards = 52;
const cardAspectRatio = 100 / 140; // Aspect ratio for width/height

// Add a single card
function addCard() {
if (cardCount >= maxCards) {
alert("You can't add more than 52 cards!");
return;
}

const cardIndex = cardCount % cardNames.length;
const cardName = cardNames[cardIndex];
const card = document.createElement('img');
card.className = 'card';
card.src = `cards/${cardName}`;
card.alt = "Card";

// Set initial z-index for the card
card.style.zIndex = cardCount;

card.addEventListener('dragstart', dragStart);
card.addEventListener('dragend', dragEnd);
card.addEventListener('click', () => {
// Toggle selection and z-index
if (selectedCard === card) {
card.style.border = card.style.border ? '' : '2px solid red'; // Toggle border
bringCardToFront(card);
} else {
if (selectedCard) selectedCard.style.border = 'none'; // Deselect previous
selectedCard = card;
card.style.border = '2px solid red'; // Highlight selected
bringCardToFront(card);
}
});

document.getElementById('workspace').appendChild(card);
cardCount++;
resizeCards();
arrangeCards();
}

// Bring the clicked/dragged card to the front
function bringCardToFront(card) {
card.style.zIndex = 1000; // Set a high z-index for the card
}

// Add all cards
function addAllCards() {
deleteAllCards(); // Clear previous cards before adding new
for (let i = 0; i < maxCards; i++) {
addCard();
}
}

// Delete selected card
function deleteSelectedCard() {
if (selectedCard) {
selectedCard.remove();
selectedCard = null;
cardCount--;
arrangeCards(); // Rearrange after deletion
}
}

// Delete all cards
function deleteAllCards() {
const workspace = document.getElementById('workspace');
workspace.innerHTML = ''; // Clear all cards
cardCount = 0;
}

// Arrange cards in a grid
function arrangeCards() {
const workspace = document.getElementById('workspace');
const cards = document.querySelectorAll('.card');
const workspaceWidth = workspace.clientWidth;
const cardWidth = parseFloat(getComputedStyle(cards[0]).width);
const spacing = 10; // Spacing between cards

const cardsPerRow = Math.floor(workspaceWidth / (cardWidth + spacing)); // Cards per row

cards.forEach((card, index) => {
const row = Math.floor(index / cardsPerRow);
const col = index % cardsPerRow;
card.style.left = `${col * (cardWidth + spacing)}px`;
card.style.top = `${row * (cardWidth / cardAspectRatio + spacing)}px`;
});
}

// Resize cards based on workspace size
function resizeCards() {
const workspace = document.getElementById('workspace');
const cards = document.querySelectorAll('.card');
const workspaceWidth = workspace.clientWidth;
const cardWidth = (workspaceWidth / 13) - 10; // Fit 13 cards per row
const cardHeight = cardWidth / cardAspectRatio;

cards.forEach(card => {
card.style.width = `${cardWidth}px`;
card.style.height = `${cardHeight}px`;
});

arrangeCards(); // Rearrange after resizing
}

// Drag and drop functions
function dragStart(e) {
this.style.opacity = '0.5';
bringCardToFront(this); // Bring the dragged card to the front
e.dataTransfer.setData('text/plain', null); // Required for drag to work
}

function dragEnd(e) {
this.style.opacity = '1';
const workspace = document.getElementById('workspace');
const x = e.pageX - workspace.offsetLeft - this.offsetWidth / 2;
const y = e.pageY - workspace.offsetTop - this.offsetHeight / 2;

// Ensure card stays within bounds
this.style.left = `${Math.min(Math.max(x, 0), workspace.offsetWidth - this.offsetWidth)}px`;
this.style.top = `${Math.min(Math.max(y, 0), workspace.offsetHeight - this.offsetHeight)}px`;

// Set the z-index to ensure it remains on top after dragging
bringCardToFront(this);
}

// Automatically resize and rearrange cards when window is resized
window.addEventListener('resize', resizeCards);
</script>
</body>
</html>