2

我有一个漂浮在右下角的图像（要放入按钮，必须固定位置）。但是，我页面上的部分文本消失在图像后面。是否可以使此文本环绕我的图像？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
 <img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png' 
style='float:right;
position: fixed;
right:50px; 
bottom:50px;
width:20%'>
Text is placed here
</body>
</html>

您可以在此示例页面上查看问题的实际效果。

4

3 回答 3

1

不，不仅仅在 CSS 中。

图像浮动的事实在这里没有帮助，因为它也是固定的。因此，它不再是流程的一部分，并且文本不再响应它。

仅靠 CSS 无法解决此问题。您可以通过在滚动时移动图像来使用 Javascript 修复它，但它很难正确，并且会严重减慢页面的滚动速度，因为每次移动后都必须重新对齐文本。

我认为你最好寻找不同的解决方案。

于 2013-10-04T13:40:13.520 回答
1

当您使用固定位置或绝对位置时（此处的浮动与您的样式无关，您可以将其删除）您正在从其自然流中删除一个元素。因此，给定这个位置，文本无法检测到图像并围绕它重新排列。

于 2013-10-04T13:40:30.500 回答
-2

使用 Z-index 属性，您可以做到这一点..

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
    <img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png' 
    style='float:right;
    position: fixed;
    z-index:-100;
    right:50px; 
    bottom:50px;
    width:20%'>
    <p style="z-index:12000">
    Text is placed here</p>
    </body>
    </html>
于 2013-10-07T06:00:38.393 回答