почему мои подписи не отображаются в центре изображения слайдера

Question

Я пытаюсь создать свой слайдер, используя css свойства анимации. Для этого я создал слайдер, который работает, но когда я попытался добавить подписи, он тоже работает, но заголовки отображаются под изображениями слайдера, а не в центре изображений, даже если я добавил абсолютную позицию. вот мой код я также дал относительную позицию его родительскому div, но все еще не работает

*{
	margin: 0;
	padding: 0;
}
#fullwrapper{
	width: 100%;
	height: auto;
}



/*=========================Slider Style======================*/

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@keyframes caps {
0% { left: 0%; float: none; }
20% { left: 0%; float: none;}
25% { left: -100%; float: none;}
45% { left: -100%; float: none;}
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}












#slider { overflow: hidden;  }
#slider figure img { width: 20%; float: left; }
#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 

}

#captions{
	position: absolute;
    top: 50%;
    left: 50%;
	width: 500%;
	  animation: 30s caps infinite; 

}

.caption{
	width: 20%;
	float: left;
	font-size: xx-large;
	font-weight: bold;
	color: red;
	font-variant: small-caps;
}




/*=========================Slider Style======================*/
#navbar{
	width: 100%;
	height: 40px;
	background-color: transparent;
	position: absolute;
	top: 0;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="fullwrapper">  <!-- Start of Full Body Wrapper-->
	<div id="header">   <!-- Start of of Header-->
		<div id="slider">



        <figure>
             <img src="austin-fireworks.jpg" alt>
             
             <img src="taj-mahal_copy.jpg" alt>
   
             <img src="ibiza.jpg" alt>
            
             <img src="ankor-wat.jpg" alt>
        
             <img src="austin-fireworks.jpg" alt>
        </figure>
    

<div id="navbar">
	<nav>
		<a href="">Home</a>
	</nav>
	
</div>

<figure id="captions">
<span class="caption">some caption text 1</span>
<span class="caption">some caption text 2</span>
<span class="caption">some caption text 3</span>
<span class="caption">some caption text 4</span>
<span class="caption">some caption text 5</span>
</figure>
</div>

	</div><!-- End  of Header-->   

</div> <!-- End of Full Body Wrapper-->

Answer 1

Я решил это сам. Я поместил заголовок div в другой div, затем установил абсолютную позицию, и он работает нормально.