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 に答える
-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 に答える