html - CSS 让文本覆盖图像

Question

你知道 tekst(段落)如何总是环绕 float 图像，就像这样吗？ [见 img]

我希望 tekst 超越图像。就像下面的示例 img 一样。我尝试使用 z-index 和 display:inline 但都没有用。

这不是我真正的 HTML，但基本上是我的样子；

<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

尝试:

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

关键是绝对定位。确保容器已设置位置(如果当前没有，请使用 relative)。

(您可能还需要一些 z-indexing 来确保图层正确)。