我正在重新创建incila instagram页面，我需要覆盖<图类="；幻灯片">元素，因为之后我会放一个动画，但我不能覆盖图像，我已经尝试了一切，因为我是一个初学者，我不能。
我该怎么做？
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}
*{
padding:0;
margin:0;
box-sizing: border-box;
text-decoration: none;
font-family: sans-serif;
font-size: 14px;
}
body{
background-color: #fafafa;
}
.content{
display: flex;
justify-content: center;
align-items: center;
}
.container-login{
background-color: rgb(255, 255, 255);
border:1px solid;
border-color: rgb(221, 221, 221);
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-size: 20px;
}
.img-perfil{
border-radius: 50%;
width: 100px;
height: 92px;
margin: 20px;
}
.not{
background-color: #0095fe;
color: #ffffff;
width: 279.08px;
height: 30px;
text-align: center;
padding: 8px;
margin-bottom: 30px;;
border-radius: 4px;
}
.container-trocar-conta{
display: flex;
flex-direction: row;
}
.change{
margin-left: 2px;
color:#0095fe;
font-weight: bold;
}
.slide{
position: relative;
z-index: 10;
margin-left: 151px !important;
margin-top: -521.5px !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Instagram Inicial</title>
</head>
<body>
<div class="content">
<div class="container-img-cel">
<img class="cel"src="https://www.instagram.com/static/images/homepage/home-phones.png/43cc71bb1b43.png">
<figure class="slide">
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
</div>
<div class="container-login">
<img class="img-logo" src="https://logodownload.org/wp-content/uploads/2017/04/instagram-logo-17.png">
<div class="img">
<img class="img-perfil" src="https://cdn.cmjornal.pt/images/2019-06/img_432x244$2019_06_25_12_54_40_863705.jpg">
</div>
<a href="#"class="not">Continuar como dog ?</a>
<div class="container-trocar-conta">
<p>Não é dog ?</p>
<a class="change" href="#"> Trocar de conta</a>
</div>
</div>
</div>
</body>
</html>您正在使用.sslide类更改整个框架的css，而不是单个图片。
你可以给每张照片一个(第二个(唯一的类，并单独设置每张照片的位置。然后可以通过在每个图像上设置position: absolute;来实现重叠，尽管这会带来一些定位问题。
因此，与其使用.side，不如像这个一样更改图像
<figure class="slide">
<img class="foto_1" src="https://www.instagram.com/static/images/homepage/screenshot4.jpg/842fe5699220.jpg"/>
<img class="foto_2" src="https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg"/>
<img class="foto_3" src="https://www.instagram.com/static/images/homepage/screenshot2.jpg/6f03eb85463c.jpg"/>
<img class="foto_4" src="https://www.instagram.com/static/images/homepage/screenshot3.jpg/f0c687aa6ec2.jpg"/>
<img class="foto_5" src="https://www.instagram.com/static/images/homepage/screenshot5.jpg/0a2d3016f375.jpg"/>
</figure>
然后为每个图像创建一个单独的CSS条目，如
.foto_1{
position: absolute;
left: 0px
}
.foto_2{
position: absolute;
left: -250px
}
其中CCD_ 2的量增加了每个foto的图像的宽度。