css中怎么把小图放到到大图上
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中怎么把小图放到到大图上相关的知识，希望对你有一定的参考价值。
参考技术A 你的意思是说两张图在一行还是小图在大图上面漂浮？如果是两张图在一行，给两张图添加float:left; 给两张图的父元素添加 overflow:hidden;
如果是小图在大图上面漂浮，给小图添加position:absolute; left:0; top:0; 给两张图的父元素添加 position:relative;
不明白的请追问追问
我想让小图悬浮在大图的右边，我刚刚试了一下，父类的大图也动了，该怎么解决呢，谢谢
追答呃，请问这个小框框是qq客服之类的么？然后大图是banner么？
追问就是想做一个登陆页面，大图是背景，小图是一个登陆的框
追答那这个就是定位了，我说的第二种；你有结构么？代码贴上来我写下给你
本回答被提问者采纳当鼠标放在小图上显示大图时，显示的大图不能超出当前窗口？用js做吗？怎么做的？
当大图超出时，等比缩放；如果小图在左下方，怎么让大图显示在当前窗口可见区域内，如右上方？
你的补充问题， 的意思就是完全另一种效果了。 以下实现方法：HTML:
<div style="width:200px; height:200px; overflow:hidden; position:relative">
<img src="" width="100" height="100" id="pic_small_1" onmouseover="show_big('pic_big_1')" onmouseover="hide_big('pic_big_1')>
<img src="" width="200" height="200" id="pic_big_1" style="position:absolute; top:-100px; right:20px; " >
</div>
js:
function show_big(id)
document.getElementById(id).style.display="block";
function hide_big(id)
document.getElementById(id).style.display="none";
-----------------------------------------------------------------------------------------------------------------
HTML:
<div style="width:200px; height:200px; overflow:hidden "><img src="" width="100" height="100" id="pic_1" onmouseover="fangda('pic_1')" ></div>
JS:
function fangda(id)
document.getElementById(id).style.width="300px";
document.getElementById(id).style.width="300px";
注： 当鼠标放到小图时， 小图就放大了三倍， 但是 DIV只有200PX 。而 overflow:hidden 溢出隐藏
图片将有部分看不到， 不会超出这个DIV。
（提醒：你的问题分类选错了） 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function zoomUp(obj)
obj.style.width="545px";
obj.style.height="200px";
function zoomDown(obj)
obj.style.width="54px";
obj.style.height="20px";
</script>
</head>
<body>
<img alt="pic/hp_topbanner1.jpg" src="pic/hp_topbanner1.jpg" width="54" height="20" onmouseover="zoomUp(this)" onmouseout="zoomDown(this)">
</body>
</html> 参考技术B 学习学习 都是行家
以上是关于css中怎么把小图放到到大图上的主要内容，如果未能解决你的问题，请参考以下文章