apply solid background color to p tag

Question

I have two p tags, like this:

<p class="under">Loxi phoxie</p>
<p class="over">Krinki Conxy</p>

I wan't the p.over to cover p.under, so I made this in the css:

margin: -22px 0 0 0;
background: #fff;

The p.over tag positions itself perfectly over p.under but the text of p.under shines through so its a mess of text. How can I achieve my goal, I wan't the p.over to cover p.under?

Ps. I can't hide any of the tags with javaScript or displey: none; Ds.

Answer 1

add to p.over { position: relative; z-index: 2; }

EXAMPLE

updated example