web-dev-qa-db-ja.com

CSSを使用して画像上にオブジェクトをフロートさせますか？

Cssを使用して画像上にオブジェクトをフロートさせることは可能ですか？画像（背景ではない）の上にフォームを配置したい。フロートは機能しませんが、この機能を提供する変数はありますか？

オブジェクトをフロートさせると、テキストがオブジェクトのいずれかの側にプッシュされます。私が探しているのは、これを行わないものであり、その下にあるものに関係なくただ浮かぶだけです。

csscss-float
16
user494216

あなたが探しているのは、フローティング要素が行うことではありません。フローティング要素は引き続きドキュメントフローの一部であり、そうでない要素が必要です。

絶対配置を使用して、ドキュメントフローから要素を削除します。これにより、他の要素が押し出されることがなくなり、他の要素の上に配置できます。

<div style="position:relative">    
  <img src="image.jpg" alt="" />
  <div style="position:absolute;left:0;top:0;">
    This text is on top of the image
  </div>
</div>

position:relativeが付いた要素は、その中に絶対的に配置された要素の原点として機能するため、テキストはページの左上隅ではなく、画像の上に配置されます。

32
Guffa

問題の画像を、フォームのフォーマットに使用されるdivまたは（そうです）テーブルの背景画像にすると、フォームは画像の上に「浮き」ます。

それがあなたのニーズに十分でない場合は、チェックしてください http://w3schools.com/css/css_positioning.asp

0
DwB

試してください z-index プロパティ

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
0
yvoyer