Question

我正在尝试使用www.twitchalerts.com用于警报的DOM进行一些自定义css。 DOM布局本身不可编辑，但我可以将自定义CSS应用于弹出的警报。一个吸烟者在这里：

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>

我们可以假设窗口大小为1920x1080。所有我想要的是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);
    }

如何让div位于另一个之上？

1 个答案: