How do I make two text elements overlap directly using CSS?

Let's say I have:

<div>
  hello
  <div>hello</div>
</div>

I'd like the two texts to overlap directly at the same positio开发者_运维问答n (aligned center). Doesn't matter which overlaps which.

Is it possible to do this with CSS?

The closest I can get is:

<div style="position: relative; margin: 0 auto; text-align: center; width: 0">
  hello
  <div style="position: absolute; text-align: center">hello</div>
</div>

But this results in one above (vertically) the other, and not centered.

Thanks in advance.

---

Add top: 0; width: 100% to the inner div:

<div style="position: relative; margin: 0 auto; text-align: center">
    hello
    <div style="position: absolute; top: 0; width: 100%">hello</div>
</div>

I'm not sure what width: 0 was doing on the outer div, so I removed it.

See: http://jsfiddle.net/thirtydot/Xprtd/

---

Tested in browser IE, FF, Chrome...

<div style="background:red;position: relative;text-align:center;width:100%;">
    <div style="color:Green;position:relative;">hello
        <div style="position:absolute;top:0;width:100%;">hello</div>
    </div>
</div>

---

Add top:0px; style to second div...

---

Try giving them equal width, outer - width: auto or something, inner - 100%.
You should also think about left:0;top:0 for the absolutely positioned div.

---

The style of the second div don't care.

html

<div class="styleDiv">
  hello
  <div>hello</div>
</div>

CSS

.styleDiv {
    line-height: 4px; /* 0px if you want to overlaps completly */
    text-align: center;
}

Then, adjust the line-height