There are many pictures in a div, and all small pictures must be displayed above the large picture. How to use CSS to accurately position the small pictures? The rendering is as follows_html/css_WEB-ITnose

In the rendering below, "No CD", "Browse USB", "IPod Music", "Browse Computer", "HDMI1", "HMDI2" and "Settings" are small pictures, and "PCHOME" is a large picture. Pictures, all small pictures should be displayed above the large picture.

How to use css to achieve the effects in the renderings?


If all small pictures are set to position:relative, the left and top values ​​​​of the small pictures cannot be controlled

Please let me know if you don’t have enough points, you can add points

(Note: The renderings are on the second floor)

Reply to discussion (solution)

Make a large div with the background image as a large image (PCHOME)
Place a sub-div (small image) in the div with fixed width and height
Then adjust the position of the small image

Just set the z-index. Please refer to

The position of the div is relative, the large image is placed in the div, and the position of the small image is absolute, so that the small image is positioned relative to the 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>

< img src="Browse USB"/>
.......