如何将图片层叠在<div>元素后方？

要让CD图片在.container（专辑套）后方露出，核心要解决层级覆盖和定位溢出两个问题，以下是针对性的CSS修改方案：

关键修改步骤 #

• 调整层级与定位方式：
  给.disk设置绝对定位脱离页面流，避免溢出问题；同时降低z-index确保它在.container后方。另外给.container补充相对定位，让其z-index属性生效：

  .container {
    position: relative; /* 新增，让z-index生效 */
    /* 保留原有其他样式 */
  }
  .disk {
    position: absolute; /* 替换原有relative */
    z-index: 1; /* 小于.container的69，确保在后方 */
    top: 0;
    left: 10%; /* 和.container左侧对齐 */
    margin-top: 0; /* 移除负margin */
    /* 保留其他需要的样式 */
  }
  

• 修正尺寸与露出效果：
  统一.disk和.container的宽度，保证CD与专辑套尺寸匹配；通过transform控制CD露出的幅度：

  .disk {
    width: 70%; /* 和.container宽度一致 */
    min-height: auto; /* 移除原有min-height */
    padding-bottom: 0; /* 移除原有padding-bottom */
    overflow: visible; /* 改为visible，允许CD露出容器 */
  }
  .disk img {
    width: 100%;
    height: auto; /* 保持方形比例 */
    transform: translateX(15%); /* 向右移动15%，实现露出效果 */
    /* 保留position: absolute */
  }
  

修改后完整CSS代码 #

:root { /* to get the color just type var(--color) */  
  --color1:#150F0F; /*DARKEST*/  
  --color2:#221918;  
  --color3:#2C221F;  
  --color4:#423229;  
  --color5:#58493D;  
  --color6:#8D7357;  
  --color7:#BCAA9B;  
  --color8:#BCAA9B;  
  --color9:#F5DEAD;  
  --color10:#FFF9BC; /*BRIGHTEST*/  
  --border-size:3px;
}
.container {
  position: relative; /* 新增 */
  min-height: 50vh;
  width: 70%;
  margin: auto;
  margin-left:10%;
  display: grid;
  grid-template-columns: minmax(2vw, 260px) auto;
  background-color: var(--color9);
  border: 0px;
  border-style: solid;
  border-top-width: var(--border-size);
  border-bottom-width: var(--border-size);
  border-color: var(--color10);
  z-index: 69;
}
#navbar {
  height: auto;
  width: auto;
  padding: 10%;
  float: left;
  background-color: var(--color7);
  font-family: PopMagic;
  font-size: clamp(15px, 4vw, 30px);
}
#content {
  height: 100%;
  width: 100%;
  border:none;
}
.disk {
  position: absolute; /* 修改 */
  z-index: 1; /* 新增 */
  top: 0; /* 新增 */
  left: 10%; /* 新增 */
  width: 70%; /* 新增 */
  margin-top: 0; /* 修改 */
  min-height: auto; /* 修改 */
  padding-bottom: 0; /* 修改 */
  overflow: visible; /* 修改 */
}
.disk img {
  width: 100%; /* 新增 */
  height: auto; /* 新增 */
  transform: translateX(15%); /* 新增 */
  position: absolute;
}

HTML结构无需修改，保持你原有的代码即可。

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