ホームページ >ウェブフロントエンド >htmlチュートリアル >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>
fa414267e4b252509f6c1a8e84c42ddf
b3f46d3ac26cb55eee8ac987ca200bec ;
e7c2a5625101e15b0fa64eb5190d43ce
16b28748ea4df4d9c2150843fecfba68 以上です。