CSS let text go over image - html

Question

You know how tekst (paragraphs) always wrap around a floated image, like so? [see img]
I would like the tekst to go OVER the image. Like in the example img below. I tried using z-index and display:inline but neither worked.
This is not my actual HTML, but basically what I looks like;
<img src="" alt="" style="float:right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>

Answer 1

Try:
<div style="position: relative;">
<img src="" alt="" style="position: absolute; top: 0px; right: 0px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
</div>
The key is absolute positioning. Make sure the container has a position set (use relative if it doesn't have one currently).
(You may also need some z-indexing to make sure the layers are correct).

Answer 2

You could either use position: absolute and z-index to move the image behind the text, or use the image as the paragraph's background image.
eg
HTML:
<p><img src="xyz.jpg" /> Lorem ipsum</p>
CSS:
img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
p {
z-index: 10;
}
Alternatively:
<p>Lorem ipsum</p>
CSS:
p {
background: url(xyz.jpg) top right no-repeat transparent;
}

Answer 3

If I understand the question, here is what you want jsfiddle .
Z-index only works with position: absolute.
Countdown coordinates depends on the value of the property position.
If the parent element is set to position: relative, then absolute positioning of child elements determines their position on top of the parent.