div には多くの画像があり、小さな画像はすべて大きな画像の上に表示する必要があります。CSS を使用して小さな画像を正確に配置するにはどうすればよいですか?レンダリングは次のとおりです_html/css_WEB-ITnose

以下のレンダリングでは、「CD なし」、「USB の参照」、「iPod ミュージック」、「コンピュータの参照」、「HDMI1」、「HMDI2」、「設定」が小さい画像で、「PCHOME」が大きい画像です。すべての小さい画像は大きい画像の上に表示されます。

CSS を使用してレンダリングで効果を実現するにはどうすればよいですか?


すべての小さな画像がposition:relativeに設定されている場合、小さな画像の左と上の値を制御できません

専門家に知らせてください。ポイントが十分でない場合は、ポイントを追加できます

(注: レンダリングは 2 階にあります)

ディスカッションに返信 (解決策)

背景画像を大きな画像として大きな div を作成します (PCHOME)
場所幅と高さを固定したdiv内にサブdiv(小さい画像)を入れます
それから小さく調整します 画像の位置

z-index を設定するだけです を参照してください

は相対的で、大きな画像は div に配置され、小さな画像の位置は絶対的なため、小さい画像は画像は div に対して相対的に配置されます

<div style="position:relative"><img src="无光盘" style="position:absolute;left:0px top:0px"/><img src="浏览USB" style="position:absolute;left:100px top:0px"/>.......<img src="PCHOME"/></div>

;