Как иметь div, расположенный поверх другого?

Question

Я пытаюсь выполнить некоторые пользовательские css с DOM, которые www.twitchalerts.com использует для оповещений. Сам макет DOM не редактируется, но я могу применить пользовательский CSS к появляющимся предупреждениям. Plunker здесь:

https://plnkr.co/edit/W8HkjUoF9fzlTkrbtwmN?p=info

DOM-схема оповещения, которая производится здесь:

<div id="widget" class="widget-AlertBox" data-layout="banner"> 
<div id="alert-box"> 
    <div id="wrap"> 
    <div id="alert-image-wrap"> 
     <div id="alert-image" style="background-image: url('http://claggs.macminicolo.net/overlay/donation.png');"> 
     <img src="http://claggs.macminicolo.net/overlay/donation.png"> 
     </div> 
    </div> 
    <div id="alert-text-wrap"> 
     <div id="alert-text"> 
     <div id="alert-message" style="font-size: 64px; color: rgb(255, 255, 255); font-family: 'Open Sans'; font-weight: 800;"> 
      <span style="color: rgb(50, 195, 166);"> 
             <span style="color: rgb(50, 195, 166);"> 
              <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">m</span> 
      <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">i</span> 
      <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">k</span> 
      <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">e</span> 
      </span> 
      </span> donated <span style="color: rgb(50, 195, 166);"> 
             <span style="color: rgb(50, 195, 166);"> 
              <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">$</span> 
      <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">6</span> 
      <span class="animated-letter wiggle" style="color: rgb(50, 195, 166);">1</span> 
      </span> 
      </span>!</div> 
     <div id="alert-user-message" style="font-weight: 400; font-size: 24px; color: rgb(255, 255, 255); font-family: 'Open Sans';">This is a test donation for $61.</div> 
     </div> 
    </div> 
    </div> 
</div> 

Мы можем предположить, что размер окна будет 1920х1080. Все, что я хочу, это для div с сообщением (div # alert-text-wrap), которое должно быть расположено внутри черной полосы изображения donation.png. Может ли кто-нибудь помочь?

Answer 1

Попробуйте это ..

.black-bar { 
    position: absolute; 
    z-index: (adjust it till get what you want); 
    top: (adjust it till get what you want); 
    left: (adjust it till get what you want); 
    }