横幅广告图片上的文字块

Question

我有以下结构

<li class="hero-dna"></li>

这个<li>包含一个像bakgound的图像，我想添加以下文字

<font class="banner-title1">Bla bla bla</font>

在横幅顶部作为图层。但如果我之前把它放在它后面，它就在它后面。

以下是页面：https://genomeqatar-dev.qcri.org/

有没有办法做到这一点？

感谢任何帮助， 提前致谢

Answer 1

使用绝对位置;（）

li{
   position: relative;
}
li font{
  position: absolute;
   top:0;
}//however,I suggest you can use "<span>" <h1>-<h6>" to replace <font>,beacuse html5 don't recommend use <font>