How to wrap text around floating, fixed image?

后端未结

关注

 3  1147

I\'ve got an image that floats in the bottom right corner (to put in the button, the position has to be fixed). However, part of the text on my page disappears behind the image.

相关标签:

3条回答

旧时难觅i

2021-01-22 17:36

No, not in CSS alone.

The fact that the image is floated doesn't help here, because it is also fixed. Therefor it is not part of the flow anymore and the text doesn't respond to it.

This cannot be fixed by CSS alone. You could fix it using Javascript by moving the image around as you scroll, but it will be hard to get right and it will seriously slow down scrolling through your page, since the text will have to be re-aligned after each movement.

I think you'd better look out for a different solution.

0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2021-01-22 17:39

when you use a position fixed or absolute (float here is irrelevant for your style, you could remove it) you're removing an element from its natural flow. Thus, given this position, the text is not able to detect the image and to re-arrange itself around it.

0 讨论(0)
发布评论:

提交评论
- 加载中...

梦谈多话

2021-01-22 17:44

Using Z-index property you can do this..

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

0 讨论(0)