问题描述
大家好，我遇到了学校项目网站的问题。 我创建了一个画廊来显示图像，但我不知道为什么，但是 div 'txt' 与 div 'footer' 重叠。 'txt' div 位于 'slider' div 内，因为我希望在图片更改时更改标题和描述。但是文本与页脚 div 重叠。我不明白为什么会这样。如果您需要更多信息或代码无法理解，请告诉我，我会尽力更好地解释问题！ 有人可以帮助我吗？真的很感激（希望我解释得很好） This is what it looks like
<div class="slider">
<div class="myslider fade" style="display: block;">
<img src="Immagini/thumb-1920-672647.jpg" style="width:100%; height:100%";>
<hr style="width:50%; position:relative; margin:auto; margin-top:5%; border-color:#000000;">
<div class="txt">
<h1>IMMAGINE 2</h1>
<p>descreizione ofogfiehkjashfl</p>
</div>
</div>
<div class="myslider fade">
<img src="Immagini/thumb-1920-672645.jpg" style="width:100%; height:100%;">
<hr style="width:50%; position:relative; margin:auto; margin-top:5%; border-color:#000000;">
<div class="txt">
<h1>IMMAGINE 3</h1>
<p>descreizione ofogfiehkjashfl</p>
</div>
</div>
<div class="myslider fade">
<img src="Immagini/thumb-1920-672643.jpg" style="width:100%; height:100%;">
<hr style="width:50%; position:relative; margin:auto; margin-top:5%; border-color:#000000;">
<div class="txt">
<h1>IMMAGINE 4</h1>
<p>descreizione ofogfiehkjashfl</p>
</div>
</div>
<div class="myslider fade">
<img src="Immagini/thumb-1920-672648.jpg" style="width:100%; height:100%;">
<hr style="width:50%; position:relative; margin:auto; margin-top:5%; border-color:#000000;">
<div class="txt">
<h1>IMMAGINE 1</h1>
<p>descreizione ofogfiehkjashfl</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dotsBox" style="text-align:center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<script src="jscode.js"></script>
<div class="footer">
<div class="container-social">
<a class ="link-icons" href="https://www.imdb.com/title/tt3460252/"><img class="social-icon" src="Icone/kisspng-computer-icons-imdb-imdb-5b3f4533539f881.svg" alt="icona IMDB"></a>
<a class="link-icons" href="https://www.facebook.com/TheHatefulEight.ilfilm"><img class="social-icon" src="Icone/Facebook.svg" alt="icona facebook"></a>
<a class="link-icons" href="https://twitter.com/thehatefuleight"><img class="social-icon" src="Icone/Twitter.svg" alt="Icona twitter"></a>
<a class="lnk-icons" href="https://www.instagram.com/thehatefuleightmovie/?hl=it"> <img class="social-icon" src="Icone/Instagram.svg" alt="icona instagram"></a>
</div>
<hr style="width:50%; margin:auto; border-color:#000000;">
<div class ="IMDBactors">
<p class="copyright-Line">copyright Andrea Velletta</p>
<ul class="LinkActorSx">
<li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000514/"><img class="imgfoot" src="Icone/LinkAttore1.png" alt="Icona attore"></a> </li>
<li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0001136/"><img class="imgfoot" src="Icone/LinkAttore2.png" alt="Icona attore"></a></li>
<li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000168/"><img class="imgfoot" src="Icone/LinkAttore3.png" alt="Icona attore"></a> </li>
<li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000621/"><img class="imgfoot" src="Icone/LinkAttore4.png" alt="Icona attore"></a> </li>
<li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000619/"><img class="imgfoot" src="Icone/LinkAttore5.png" alt="Icona attore"></a> </li>
<li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000492/"><img class="imgfoot" src="Icone/LinkAttore6.png" alt="Icona attore"></a> </li>
<li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm1475594/"><img class="imgfoot" src="Icone/LinkAttore7.png" alt="Icona attore"></a> </li>
<li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0324658/"><img class="imgfoot" src="Icone/LinkAttore8.png" alt="Icona attore"></a> </li>
</ul>
</div>
</div> .slider{
position:relative;
width:100%;
}
.myslider{
height:1080px;
oveflow:hidden;
display: none;
}
.prev,.next{
position:absolute;
top:50%;
transform: translate(0,-50%);
font-size:50px;
padding:15px;
cursor:pointer;
color:#fff;
transition:0.1s;
user-select:none;
}
.prev:hover,.next:hover{
color: #D4AD4B;
}
.next{
right:0;
}
.dotsBox{
position: absolute;
left:41%;
transform: translate(50%);
bottom:20px;
cursor:pointer;
}
.dot{
display: inline-block;
width:15px;
height:15px;
border:3px solid #fff;
border-radius:50%;
margin: 0 10px;
cursor:pointer;
}
.txt{
padding-top: 2%;
text-align: center;
-webkit-animation-name: posi;
-webkit-nimation-duration:2s;
animation-name:posi;
animation-duration:2s;
z-index:1;
}
.txt h1{
font-family: "Nunito Sans";
font-size:3vw;
}
.txt p{
padding-top: 1%;
font-family: "Nunito Sans";
font-size:1vw;
}
.footer{
background-color: #BD1B1D;
padding-bottom:2%;
padding-top: 1%;
}
.imgfoot{
max-width: 100%;
height: auto;
}
.contimgfooter{
width:5vw;
height:20%;
display:inline;
overflow:hidden;
}
.container-social{
padding-top: 3%;
padding-bottom: 2%;
clear: both;
display: flex;
justify-content: center;
}
.social-icon{
padding-right: 20%;
}
.copyright-Line{
padding-top: 2%;
text-align: center;
font-family: Lato;
font-style: normal;
font-weight: 600;
font-size: 0.9vw;
line-height: 19px;
color: #F5F8FA;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）