CODEWITHSUNDEEP
htmlcsspositioning
Linkjuice57
Linkjuice57

Reputation: 3761

CSS let text go over image

You know how tekst (paragraphs) always wrap around a floated image, like so? [see img]

example-float

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.

example-what-i-want

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>

Upvotes: 0

Views: 6859

Answers (3)

Johno
Johno

Reputation: 1959

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).

Upvotes: 2

whostolemyhat
whostolemyhat

Reputation: 3123

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;
}

Upvotes: 2

Xella
Xella

Reputation: 1268

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.

Upvotes: 0

Related Questions