Heim > Web-Frontend > HTML-Tutorial > 在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose

在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:56:02
Original
1966 Leute haben es durchsucht

在下面的效果图中,“无光盘”、“浏览USB”、“IPod音乐”、“浏览电脑”、“HDMI1”、“HMDI2”、“设置”是小图片,“PCHOME”是大图片,所有小图片都要显示在大图片上方。

如何用css实现效果图中的效果呢?


如果把所有的小图片都设置成position:relative,无法控制小图片的left和top的值

请高手告知,分不够可以加分

(注:效果图在第二楼)


回复讨论(解决方案)



做一个大的div 背景图片为大图(PCHOME)
在div里放置子div(小图)固定宽度和高度
接着调小图位置


z-index  设置一下就可以了    请参考


http://www.ido321.com/666.html LZ开源给图片我  或者 我晚点帮你弄一个

div的position为relative,大图放到div中,小图片position为absolute,这样小图片就相对于div定位了

<div style="position:relative"><img  src="无光盘"   style="max-width:90%"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" ><img  src="浏览USB"   style="max-width:90%"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" >.......<img  src="PCHOME"/ alt="在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose" ></div>
Nach dem Login kopieren


在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose
在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose
.......
在一个div中有许多图片,所有小图片都要显示在大图片上方,如何用css精确定位小图片的位置呢?效果图如下_html/css_WEB-ITnose

这样就可以了吧!
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage