Clickable cards with links within

Issue

I am creating content cards which need to be clickable. Clicking on these cards take you to the page where you can see the full content. Additionally, for some users, the cards also have links inside which go through different pages (like to edit or report). You can see the desired design here: https://jsfiddle.net/4s8b5kb1/1/ (the card would go to more details page).

Looking through older questions, I came across methods that either make the card div clickable by adding an onClick handler or having a persistent 'View More' link. Ideally, I am want to just use plain CSS without wanting to add onClick handlers that do the job of links, and not have a persistent 'View More' button either.

I have also read of strategies where you create a link within a div and then using z-index you can let it act as the link for the entire div, and having other more specific links have higher z-index.

I have tried it but with not much luck. Here is the code so far: https://jsfiddle.net/4s8b5kb1/1/

Any ideas are much appreciated!

Solution

I put position: relative on edit class

.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}

You can check it here:

.parent {
	display: flex;
	justify-content:center;
	align-items:center;
	height: 100vh;
}

.card {
	height: 200px;
	width: 260px;
	background: #FFF;
	border: 1px solid #FAFAFA;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	overflow-y: auto;
	
	padding: 2em;
	font-family: Courier New;

	font-size: 0.7rem;
	cursor: pointer;
	
	position: relative;

}

.card p {
	z-index: 10;
}

.edit {
	color: indianred;
	font-size: 1rem;
	z-index: 10;
  position: relative;
}

.view {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	opacity: 0;
}

<div class ="parent">

<div class="card">
   <a class="edit" href="#edit">EDIT</a>
   <a class="edit" href="#edit">REPORT</a>
	<p>
        For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us. As
        we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with
        a finger it would crumble and fall apart. Seeing this has to change a man. When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
    </p>
	<a class = "view" href = "#view">View</a>
</div>
</div>

Answered By - beginnerprogrammer