Home >Web Front-end >HTML Tutorial >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
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
- WBOYOriginal
- 2016-06-24 11:56:022015browse
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
http://www.ido321.com/666.html LZ open source and give me the picture or me I will help you get one later
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>
fa414267e4b252509f6c1a8e84c42ddf
21b79fbe3b6fcccee2d3f63e04c160c1
436642ef5bf011b1af73ad48c824ff94
.......
e7d03721d1df27ee724930b65898784a
16b28748ea4df4d9c2150843fecfba68
That's it !