如何实现图片DIV与LUCETTE文本DIV的层叠效果？

先搞懂核心逻辑 #

CSS里元素的层叠顺序不是随便设置z-index就行的——只有设置了position: relative/absolute/fixed/sticky的元素，z-index才会生效。如果元素是默认的position: static，你设再多z-index都没用，该在下面还是在下面。

一步步改代码 #

假设你的HTML结构大概是这样：

<div class="lucette-text">LUCETTE</div>
<div class="image-box">
  <img src="your-img.jpg" alt="...">
</div>

1. 给两个容器加定位 #

先给文本和图片容器都加上position: relative（用absolute也行，看你布局需求）：

.lucette-text, .image-box {
  position: relative;
}

2. 调整z-index层级 #

要让图片压在文字上面，给图片容器设更高的z-index值就行：

.lucette-text {
  z-index: 1; /* 层级低，会被压在下面 */
}
.image-box {
  z-index: 2; /* 层级高，覆盖在上面 */
}

3. 排查父元素的坑 #

要是这么改了还是没用，去检查父元素有没有搞特殊——比如父元素设了opacity < 1、transform或者自己的z-index，这些属性会创建新的层叠上下文，子元素的z-index只能在这个上下文里生效。如果两个容器的父元素不一样，得确保它们处于同一个层叠上下文里，或者调整父元素的相关属性。

4. 顺便解决文本顶在页面的问题 #

如果“LUCETTE”顶在页面是布局问题，比如你想让它和图片重叠，那给文本容器设position: absolute，再调整位置：

.lucette-text {
  position: absolute;
  top: 20px; /* 按需调位置 */
  left: 20px;
  z-index: 1;
}

避坑提醒 #

• 别给没设定位的元素加z-index，纯浪费时间
• z-index只在同一个层叠上下文里比大小，跨上下文的话子元素再高也没用
• 能不用z-index就不用，尽量靠布局结构控制顺序，不然以后改起来头疼

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