添加缩放属性后悬停时，我的 div 容器会覆盖导航栏

Question

我正在为我的编码训练营制作一个项目，他们要求我将 transform: scale 属性添加到项目卡上。但是添加之后，每当我将鼠标悬停在卡片上时，它就会越过导航栏。

添加缩放后的悬停示例属性：

但是如果没有添加 transform: scale()，它就不会发生。有人可以帮助我吗？

这是来自 Github 页的实时 link。 https://adamteddychang.github.io/Hello-Portfolio/

代码如下：

.bk-img-proj {
  margin: 2rem;
  height: auto;
  margin-bottom: 0;
  padding-right: 0;
}

.bk-img-proj:hover {
  background-image: url(Images/bg-img-dsktop/hover-proj-img.png);
  background-repeat: no-repeat;
  border: 1px solid black;
  display: flex;
  flex-direction: column-reverse;
  cursor: pointer;
  transform: scale(1.08);
  transition: 50ms;
}

<div class="bk-img-proj">
  <h1 class="bk-img-title">Progessional Art Printing Data</h1>
  <p class="bk-img-p">A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industry's standard</p>
  <ul class="lang-contain_2">
    <li class="lang-li_2">html</li>
    <li class="lang-li_2">bootstrap</li>
    <li class="lang-li_2">Ruby</li>
  </ul>
  <button class="st-see-btn_2" type="button">See Project</button>
</div>

Answer 1

将 z-index: 10 添加到您的 navbar。这样它将始终位于您的内容之上！

我真的无法解释为什么你会遇到这个问题，但我知道 z-index 会解决它。

添加缩放属性后悬停时，我的 div 容器会覆盖导航栏

My div container covers the navbar when hovers after scaling property was added

html

css

grid

github

flexbox

添加缩放 属性 后悬停时，我的 div 容器会覆盖导航栏

My div container covers the navbar when hovers after scaling property was added

html

css

grid

github

flexbox

添加缩放属性后悬停时，我的 div 容器会覆盖导航栏