Question

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

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

您可以在此example page上看到问题。

Answer 1

不，不仅仅是CSS。

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

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

我认为你最好注意一个不同的解决方案。

Answer 2

当你使用一个固定或绝对的位置（这里浮动与你的风格无关，你可以删除它）你从一个自然流中移除一个元素。因此，给定此位置，文本无法检测图像并在其周围重新排列。

Answer 3

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

如何围绕浮动，固定图像包装文本？

3 个答案: