Question: I have this [Website](http://avocat.dac-proiect.ro/wp/?page_id=10) 

**HTML:**

```css
.lista_sus li {
  display: inline-block;
  position: relative;
  margin: 0 9px 5px 0;
  background-color: #041067;
}
.lista_sus li p {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}
.hide {
  display: none;
}
```

```html
<ul class="lista_sus">

  <li>
    <img src="./wp-content/themes/twentyfourteen/images/1.png" alt="Smiley face" height="250" width="250">

    <p class="hide">
      <div class="title">Zorica L. Codoban
        <br>avocat
        <br>
      </div>

      - Avocat din anul 1997
      <br>- domenii de specialitate: drept civil, drept comercial, drept succesoral, drept imobiliar, dreptul muncii, drept administrativ, dreptul familiei;
      <br>- limbi vorbite: franceza.
    </p>
  </li>
```

I want to position text over the image ... I did some testing we have found here in the forum but not working.

How can i solve this problem?
Can you help me please?

Thanks in advance!

Answer: 
Option1: Use background Image
=============================

You could set the image in the background of a div, and have text within the image:

```css
div {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/300);
}
```

```html
<div>This is some text</div>
```

---

Option2: Use Positioning
========================

You could use a wrapper div (`position: relative`), and position the text and image accordingly (`position: absolute`):

```css
.wrap {
  position: relative;
  height: 300px;
  width: 300px;
}
.text,
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
}
.text {
  z-index: 8;
}
```

```html
<div class="wrap">
  <div class="text">This is some text</div>
  <img src="http://placekitten.com/g/300/300" />
</div>
```
Usually you make a div with position relative. And in it you have a img, and a text element that is absolute positioned where you wan't it.