0

你知道 tekst (paragraphs) 总是围绕一个浮动的图像，像这样吗？[见图片]

示例浮点数

我希望 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>
4

3 回答 3

2

您可以使用position: absolute和z-index将图像移动到文本后面，或者将图像用作段落的背景图像。

例如

HTML：

<p><img src="xyz.jpg" /> Lorem ipsum</p>

CSS：

img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
p {
    z-index: 10;
}

或者：

<p>Lorem ipsum</p>

CSS：

p {
    background: url(xyz.jpg) top right no-repeat transparent;
}
于 2012-06-07T08:39:05.620 回答
2

尝试：

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

关键是absolute定位。确保容器有一个位置集（relative如果它当前没有，则使用）。

（您可能还需要一些z-index检查以确保图层正确）。

于 2012-06-07T08:40:31.797 回答
0

如果我理解这个问题，这就是你想要的 jsfiddle。

Z-index 仅适用于position: absolute. 倒计时坐标取决于属性位置的值。如果父元素设置为position: relative，则子元素的绝对定位决定了它们在父元素之上的位置。

于 2012-06-07T08:50:54.470 回答