我试图在一个使用Materialize CSS的项目中，使用z-index将最上面一行卡片分层到页眉上。由于卡片现在使用的是相对定位，所以当卡片动作被悬停时，会导致其中一些卡片移动（由于每行只有一张卡片，所以在移动视图中不太明显）。 我也没打算让卡片动作的文字在悬停时移动到中间，不过我对这种效果没有意见。我试过使用绝对定位，也试过改变定位应用于哪个元素。如何防止卡片移动，同时还能使用z-index？下面是我的代码和我的(密码笔):
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
:root {
--primary-color: #c31432;
--primary-text-color: rgba(0,0,0,0.5);
--primary-text: "Open Sans", sans-serif;
}
* {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
#works-header {
position: absolute;
height: 500px;
width: 100vw;
z-index: 10;
}
#works-header h1 {
font-size: 3rem;
letter-spacing: 1px;
margin: 0 auto;
}
#cards {
position: relative;
top: 400px;
z-index: 1000;
}
.card-image {
cursor: pointer;
transition: all .3s ease;
}
.card-image:hover {
border: 3px solid var(--primary-color);
opacity: 0.85;
}
.card-image:hover .card-title {
display: none;
}
.card-action {
width: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all .3s ease;
}
.card-action:hover {
width: 100%;
position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
opacity: 0.7;
border-bottom: 2px solid var(--primary-color);
}
.card-tags {
display: none;
}
.card-image:hover .card-tags {
display: block;
position: absolute;
left: 1rem;
bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->
<section class="center" id="works">
<div id="works-header" class="black valign-wrapper">
<h1 class="white-text center-align">Check out some of my latest projects</h1>
<p></p>
</div>
<div class="container row" id="cards">
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
</div>
</div>
</section>一个解决方案是给卡片-图像添加一个边框，这样你过渡的只是不透明度和颜色，而不是边框大小（这又会重新计算图像的大小，导致闪烁）。对浏览器来说，一次处理的工作量很大。
.card-image {
cursor: pointer;
transition: all .3s ease;
border: 3px solid black;
}
代码笔.
EDIT:
对不起，我意识到有两个问题。
好吧，你不需要在页眉上进行绝对定位--绝对定位会使项目脱离页面的流程。这里不需要这样做。把卡片上的相对位置去掉，用负边距。
#cards {
top: 400px;
z-index: 1000;
margin-top: -100px;
}
我已经把悬停的绝对定位去掉了，因为这不是一个好主意。当你需要精细控制一个元素的定位时，绝对定位就会发挥它的作用。这里不需要。我还取消了50%的宽度，并添加了一个默认的边框，以防止卡片动作的闪烁。
出现这种情况的主要原因是--因为有了 border 关于 hover. 如果你真的需要这样的外观--在里面添加空的div。card-image 加插 box-shadow 为它。
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
<div class="hover-shadow"></div>
</div>
和CSS的。
.card-image .hover-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-image:hover .hover-shadow {
box-shadow: inset 0 0 0 2px (--primary-color);
}
完整的例子 在密码笔