我试图创建一个图像滑块，但当我将左角度图标的位置设置为绝对时，它会从屏幕上消失

Question

当我将左角度图标的位置设置为绝对时，它基本上会消失，但在其他情况下它仍然存在。

此处，左角图标由于其位置属性而不可见。它怎么能出现在屏幕上，这样我就可以把它放在图像的左上角，从而制作一个图像滑块。

这是我的html代码：

<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="assets/photo1.jpg">
<img src="assets/photo2.jpg">
<img src="assets/photo3.jpg">
<img src="assets/photo4.jpg">
<img src="assets/photo5.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left"></i>
</div>
<div class="slideright">
<i class="uil uil-angle-right"></i>
</div>
</div>
</section>

这是我的CSS代码：

.content{
height: 400px;
width: 750px;
overflow: hidden;
}
.imageslider{
height: 100%;
width: 100%;

}
.imageslider img{
width: 100%;
height: 100%;
object-fit: cover;
}
.slideleft{
color: red;
font-size: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slideright{
color: red;
font-size: 100px;
}

我在互联网上搜索了类似的问题，但都不起作用。

Answer 1

它在具有position: absolute;时出现。请参阅我的代码片段：

<style type="text/css">.content {
height: 400px;
width: 750px;
overflow: hidden;
border: solid;
}
.imageslider {
height: 100%;
width: 100%;
border: solid;
display: flex;
flex-wrap: wrap;
}
.imageslider img {
width: 50%;
height: calc(400px / 3);
object-fit: cover;
}
.slideleft {
color: red;
font-size: 100px;
position: absolute;
top: 15%;
}
.slideright {
color: red;
font-size: 100px;
}

<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left">slideleft</i>
</div>
<div class="slideright">
<i class="uil uil-angle-right">slideright</i>
</div>
</div>
</section>