文字覆盖图像html css

Question

我正在尝试在HTML中设置图像并希望文本在其上运行.但是,当我使用以下代码时,文本将在图像下运行.

HTML

    <div id="titel">
    <img src="images/titel.jpg" alt="titel">
    <h3>Titel</h3>
    </div>

CSS

    #titel
    {
        float:left;
        width:220px;
        height:100px;
        margin:0px 5px 5px;
    }

    h2
    {
        position:absolute;
    }

Answer 1

您需要添加position:relativetitel div和图像的顶部值.

  #titel {
      float:left;
      width:220px;
      height:100px;
      margin:0px 5px 5px;
      position:relative;
  }
  h3 {
      position:absolute;
      top:0;
  } 

jsFiddle例子

另一种选择是将图像设置为div的背景图像,并完全取消定位.

jsFiddle例子

(另请注意,在您的示例中,您有一个h3元素,但在CSS中,您定位的是h2元素.)