Html 在div中归档图像堆栈

我无法将我的图像填充到一个div中，整个div都堆叠在一起。他们好像排成一行

@关键帧淡入淡出{
0% {
不透明度：0；
}
11.11% {
不透明度：1；
}
33.33% {
不透明度：1；
}
44.44% {
不透明度：0；
}
100% {
不透明度：0；
}
}
法丹先生{
位置：绝对位置；
高度：200px；
宽度：400px；
显示：内联块；
背景尺寸：包含；
溢出：隐藏；
边框：4px实心#2e7645；
背景尺寸：封面；
背景位置：中心；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
/**轮廓：1px纯蓝色**/
}
法登先生{
最大宽度：100%；
最大高度：100%；
z指数：-1；
位置：相对位置；
左：0；
右：0；
不透明度：0；
动画名称：淡入淡出；
动画持续时间：9秒；
动画迭代次数：无限；
}
.fadein img：第n个孩子（1）{
动画延迟：0s；
}
.fadein img：第n个孩子（2）{
动画延迟：3s；
}
.fadein img：第n个孩子（3）{
动画延迟：6秒；
}

您只需将
img的
位置
从
相对
更改为
绝对
：

.fadein img
{
  ...
  z-index: -1;
  position:absolute; // <-- this is the important change
  left:0;
  right:0;
  ...

 }

.fadein img
{
...
z指数：-1；
位置：绝对；//如果您还想填充容器，请在
位置：绝对
（如上所述）
高度
和
宽度
值后添加
100%
（顺便说一句，您不需要
z-index
属性）

如果您确定图片的尺寸相同，请更改
.fadein
div的尺寸以保持比例

.fadein
{
  position:absolute;
  height:150px;
  width:350px;
...

.fadein
{
  position:absolute;
  height:150px;
  width:350px;
...