divを別のものの上に重ねる方法

Question

私はwww.twitchalerts.comアラートに使用するDOMといくつかのカスタムCSSをやろうとしています。 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になりますと仮定することができます。私が欲しいのは、donation.png画像の黒いバーの中にメッセージ（div＃alert-text-wrap）を配置したdivのためだけです。誰でも助けることができますか？

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); 
    }