html - 表彰台の CSS にアバターが正しく配置されていない

Question

アバターの人を表彰台に立たせる方法を考えています（別の画像）。これが私が意味する例です。写真Bのようにアバターの人が演壇に立ってほしいです。

私はそれをいじってみましたが、それは間違っていることがわかりました。

私は何を間違っていますか？

ありがとう。

Answer 1

コードの重要な部分は次のとおりです。

<img src="/path/to/avatar" />
<div id="avatar-holder"></div>

の前にイメージを指定したdivので、上に表示されます。その上にアバターが必要です。

html を次のように変更します。

<div id="avatar-holder">
   <img src="/path/to/avatar" />
</div>

画像を自由に配置したいので、次のようにします。

#avatar-holder {position:static;}
#avatar-holder > img {position:absolute;}
/* OR:
#avatar-holder > img {position:relative;}
*/

ここで、画像のtop/leftプロパティをいじり、適切に見えるまで負のピクセル値を割り当てる可能性があります。常に同じサイズの画像に対してのみ機能するか、より複雑なものが必要です。margins を使用してレイアウトを行うこともできますが、それはエレガントではないと思います。

結果でテキスト ボックスを覆うアバターが必要な場合はmargin-top、アバター ホルダーに a を追加するだけです。

no-repeat背景画像を使用するときは、 ;も使用したい場合があります。使用したプロパティのうち、ここcolorでtext-shadowはまったく役に立ちません。