&引用；互锁“；带有HTML和CSS的图像

我试图制作一个滑动门的效果，显示一个站点的主页，但是我对使用的图像的z索引有一些问题。基本上，图像的z索引需要高于其父容器的z索引，以防止部分图像被切断。这有点难以解释，所以请看一看我拼凑起来演示的。问题是显而易见的，但只是图像应该互锁，但其中一部分被另一部分的父z索引覆盖。HTML和CSS非常简单，只是让图像的z索引高于其父容器的z索引，这不起作用，我不知道为什么

编辑：我应该明确指出，问题在于符号中底部图像的左侧部分被左侧图像的容器截断。这可以通过使图像的z索引高于容器的z索引来解决，但我不确定为什么这不起作用

窗帘{
宽度：100%；
高度：100vh；
溢出：隐藏；
}
.右面板{
宽度：50%；
高度：100vh；
浮动：左；
z指数：2；
位置：相对位置；
背景色：#333；
转变：转变5s；
}
.左面板{
宽度：50%；
高度：100vh；
浮动：左；
z指数：3；
位置：相对位置；
背景色：#333；
转变：转变5s；
}
.内容{
位置：绝对位置；
宽度：100%；
最高：50%；
背景：333人；
z指数：1；
文本对齐：居中；
}
.左img{
右：0%；
右边距：-12.5%；
宽度：25%；
身高：50%；
z指数：2；
位置：绝对位置；
}
.右img{
浮动：左；
宽度：25%；
身高：50%；
左边缘：-12.5%；
位置：绝对位置；
}
.窗帘：悬停。左侧面板{
转化：translateX（-130%）；
}
.窗帘：悬停。右面板{
转化：translateX（130%）；
}

主要网站材料

您的

。左面板

具有较高的z索引，因此它与

内的图像重叠。右面板

。并且

z-index

创建了一个新的索引，以防止内部的图像互锁。本质上，z索引是相对于堆叠上下文的，而不是绝对数

我建议您构造z索引，使面板背景具有相同的z索引，图像具有更高的z索引（基本上创建3层：内容、封面背景、封面图像）

为此，您需要重新组织标记，以便背景是每个面板图像的同级，这样其

z-index

不会影响图像”。您可以使用实际元素来实现这一点，但我将演示如何使用：

正文{
溢出：隐藏；
}
.窗帘{
宽度：100vw；
高度：100vh；
溢出：隐藏；
z指数：0；
/*CSS变量，以防止下面的重复*/
--工件宽度：100px；
}
.幕布.内容{
/*我使用flex，因为我更习惯于使用它，但如果您愿意，可以使用浮动*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
z指数：0；
}
.窗帘板{
显示器：flex；
对齐项目：居中；
位置：绝对位置；
宽度：50%；
身高：100%；
过渡：左、右；
过渡时间：3s；
}
.窗帘板，左{
左：0；
论证内容：结束；
}
.窗帘板，对{
右：0；
}
.窗帘嵌板：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：1；
背景色：#333；
}
.窗帘片{
宽度：var（--工件宽度）；
高度：自动；
z指数：2；
余量：计算值（var（--件宽）/-2）；
}
.窗帘：悬停。向左{
左-100%；
}
.窗帘：悬停。对{
右图：-100%；
}

主要网站材料

您的

。左面板

具有较高的z索引，因此它与

内的图像重叠。右面板

。并且

z-index

创建了一个新的索引，以防止内部的图像互锁。本质上，z索引是相对于堆叠上下文的，而不是绝对数

我建议您构造z索引，使面板背景具有相同的z索引，图像具有更高的z索引（基本上创建3层：内容、封面背景、封面图像）

为此，您需要重新组织标记，以便背景是每个面板图像的同级，这样其

z-index

不会影响图像”。您可以使用实际元素来实现这一点，但我将演示如何使用：

正文{
溢出：隐藏；
}
.窗帘{
宽度：100vw；
高度：100vh；
溢出：隐藏；
z指数：0；
/*CSS变量，以防止下面的重复*/
--工件宽度：100px；
}
.幕布.内容{
/*我使用flex，因为我更习惯于使用它，但如果您愿意，可以使用浮动*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
z指数：0；
}
.窗帘板{
显示器：flex；
对齐项目：居中；
位置：绝对位置；
宽度：50%；
身高：100%；
过渡：左、右；
过渡时间：3s；
}
.窗帘板，左{
左：0；
论证内容：结束；
}
.窗帘板，对{
右：0；
}
.窗帘嵌板：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：1；
背景色：#333；
}
.窗帘片{
宽度：var（--工件宽度）；
高度：自动；
z指数：2；
余量：计算值（var（--件宽）/-2）；
}
.窗帘：悬停。向左{
左-100%；
}
.窗帘：悬停。对{
右图：-100%；
}

主要网站材料

这种方法保留了浮动，但添加了额外的标记，以保持图像元素堆叠在背景片段之上

z-index

不适用于您，因为子项的堆叠上下文