CSS добавить текст на изображение

Question

Я хотел бы знать, как добавить текст поверх каждого изображения слайдера.У меня есть следующий код HTML и CSS код

<div class=swipe>
<img src="static/img/cuisine/piz2.jpg">
<img src="static/img/cuisine/piz2.jpg">
<img src="static/img/cuisine/piz2.jpg">
</div>  

.swipe{
    overflow:auto;
    white-space:nowrap;
}

слайдер работает отлично.но когда я пытаюсь добавить текст, как показано ниже, это не работает,

<div class="d_container">
<div class=swipe>
  <div>
      <img src="static/img/cuisine/piz2.jpg" alt="Snow" style="width:100%;">
      <div class="d_bottom-left">Bottom Left</div>
      <div class="d_top-left">Top Left</div>
      <div class="d_top-right">Top Right</div>
      <div class="d_bottom-right">Bottom Right</div>
      <div class="d_centered">Centered</div>
      <img src="static/img/cuisine/piz2.jpg" alt="Snow" style="width:100%;">
      <div class="d_bottom-left">1Bottom Left</div>
      <div class="d_top-left">1Top Left</div>
      <div class="d_top-right">1Top Right</div>
      <div class="d_bottom-right">1Bottom Right</div>
      <div class="d_centered">1Centered</div>
  </div>  
 </div>  
</div>

Answer 1

Вы должны поместить свой текст в свой CSS, вам также нужно добавить значения z-index как упоминания @Obsidian Age.

.d_bottom-left{
     position: relative;
     bottom: 0;
     left: 0;
     z-index: 999;
 }

source:

https://www.w3schools.com/css/css_positioning.asp

https://www.w3schools.com/cssref/pr_pos_z-index.asp