如何正确使用z-index？及如何隐藏容器左侧溢出的心形元素？

一、z-index正确使用要点 #

• z-index仅对**设置了position属性（relative/absolute/fixed/sticky）**的元素生效，静态定位（static）元素的z-index不产生作用。
• 层级判断基于堆叠上下文：如果父元素创建了堆叠上下文（比如设置了z-index不为auto的定位元素、flex/grid容器、opacity<1、transform不为none等），子元素的z-index仅能在父容器内部的元素间排序，无法突破父容器的堆叠层级。
• 避免滥用超大值（如9999），尽量按页面模块逻辑设置层级，方便后续维护。

二、解决溢出部分不可见的问题 #

要让容器内左侧溢出的心形元素部分隐藏，只需给包裹这两个图标的父div添加两个关键样式：

1. position: relative：让内部绝对定位元素以该父容器为定位参照，同时确保父容器能形成裁剪范围。
2. overflow: hidden：裁剪掉超出父容器边界的内容。

修改后的代码示例（基于Tailwind CSS）：

<div class="relative overflow-hidden">
  <IconKalp class="absolute left-[-20px] top-5 w-[108px] h-[90px]" style="z-index: 1;" />
  <IconKalp class="absolute right-0 bottom-10 z-10 w-[250px]" />
</div>

这样设置后，左侧超出父容器的心形部分就会被隐藏，同时不影响内部元素的z-index层级关系。

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