添加transform:scale属性后项目卡片hover时覆盖导航栏如何解决

问题原因 #

transform: scale()会为元素创建独立的层叠上下文，默认层叠优先级高于未设置z-index的普通静态定位元素，你项目中的顶部导航栏未设置足够高的层级，因此被缩放后的卡片覆盖。

可落地解决方法 #

• 方案1：给顶部导航栏设置更高的层级（推荐）
  首先确保导航栏使用了非static的定位属性（吸顶导航一般默认会设置position: fixed/position: sticky），再给它添加足够高的z-index值，保证它永远处在页面最上层即可：

  /* 替换为你实际的导航栏类名 */
  .top-nav {
    /* 若导航已经设置了fixed/sticky/relative等非static定位可省略该行 */
    position: fixed;
    z-index: 999;
  }
  

• 方案2：限制卡片缩放的层叠优先级（不修改导航样式的备选方案）
  给卡片主动设置z-index，保证它的层级永远低于导航即可，同时可以顺便优化过渡动画的体验：

  .bk-img-proj {
    margin: 2rem;
    height: auto;
    margin-bottom: 0;
    padding-right: 0;
    /* 新增以下三行 */
    position: relative; /* 开启定位使z-index生效 */
    z-index: 1;
    transition: transform 50ms ease; /* 把transition移到默认状态，移入移出都有平滑过渡 */
  }
  
  .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);
  }
  

额外优化建议 #

你当前的代码中display: flex仅写在hover状态里，如果卡片默认状态不是flex布局，hover时切换布局属性会导致页面布局抖动，建议把display: flex; flex-direction: column-reverse;也移到.bk-img-proj的默认样式中，避免出现异常跳动。

内容的提问来源于stack exchange，提问作者adamteddychang