Кликабельные карты со ссылками внутри

Question

Я создаю карточки с контентом, на которые нужно нажимать.Нажав на эти карточки, вы попадете на страницу, где вы сможете увидеть весь контент.Кроме того, для некоторых пользователей на карточках также есть ссылки, которые проходят через разные страницы (например, для редактирования или отчета).Вы можете увидеть желаемый дизайн здесь: https://jsfiddle.net/4s8b5kb1/1/ (карта перейдет на страницу с более подробной информацией).

Просматривая старые вопросы, я сталкивался с методами, которые делают карту div интерактивной.добавление обработчика onClick или наличие постоянной ссылки «Просмотреть больше».В идеале я хочу просто использовать простой CSS, не желая добавлять обработчики onClick, которые выполняют работу с ссылками и не имеют постоянной кнопки «Просмотреть больше».

Я также читал о стратегиях, гдевы создаете ссылку внутри div, а затем, используя z-index, можете позволить ей действовать как ссылка для всего div, а другие более конкретные ссылки имеют более высокий z-index.

Я попробовал, но без особой удачи.Вот код на данный момент: https://jsfiddle.net/4s8b5kb1/1/

Любые идеи очень ценятся!

Answer 1

Я поставил позицию: относительно класса редактирования

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

Вы можете проверить это здесь:

.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>