导航栏和轮播字幕

Question

 #slider {
     width: 100%;
 }
 .carousel-caption{
     top: 50%;
     transform: translateY(-50%); 
     bottom: initial!important;
     
 }
 .carousel-caption h5{
    color: rgb(0, 0, 0); 
    font-size: 42px;

 };

<div class="carousel-item">
 <img src="images/image2.jpg" class="d-block w-100" alt="Loading">
           <div class="carousel-caption"> 
                  <h5>How To Make A Website</h5>
                </div> 
              </div>

enter image description here我加载了一个导航，其中有一个幻灯片轮播和一个标题。 滚动页面时，标题通过移动页面在导航上移动。 如何消除这种情况？

#slider {
     width: 100%;
 }
 .carousel-caption{
     top: 50%;
     transform: translateY(-50%); 
     bottom: initial!important;
     
 }
 .carousel-caption h5{
    color: rgb(255, 255, 255); 
    font-size: 42px;

 };