html - 带有链接的可点击卡片

Question

我正在创建需要可点击的内容卡片。单击这些卡片会将您带到可以查看完整内容的页面。此外，对于某些用户而言，这些卡片还包含内部链接，这些链接可以通过不同的页面(如编辑或报告)。您可以在这里看到所需的设计: https://jsfiddle.net/4s8b5kb1/1/ (该卡将转到更多详细信息页面)。

查看较早的问题，我遇到了通过添加 onClick 处理程序或具有持久的“查看更多”链接使卡片 div 可点击的方法。理想情况下，我只想使用纯 CSS 而不想添加执行链接工作的 onClick 处理程序，并且也没有持久的“查看更多”按钮。

我还读过一些策略，您可以在 div 中创建一个链接，然后使用 z-index 您可以让它充当整个 的链接>div，并且具有其他更具体的链接具有更高的 z-index。

我试过了，但运气不佳。这是到目前为止的代码:https://jsfiddle.net/4s8b5kb1/1/

非常感谢任何想法!

Answer 1

我把 position: relative 放在编辑类上

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