1. 爱易网页
  2. HTML教程
  3. 求打救！css弹出div图层的relative、absolute的图层遮挡、置顶的有关问题

求打救！css弹出div图层的relative、absolute的图层遮挡、置顶的有关问题

日期：2014-05-16　 浏览次数：20767 次

求打救！！！css弹出div图层的relative、absolute的图层遮挡、置顶的问题
本人想实现鼠标移动到小图的上方时显示大图，但左右上下四周的小图会遮挡弹出的大图，也就是设置的大图置顶不生效，请问大家是什么问题啊？

如果去掉css中.products-normal li--------position:relative;这个属性就没问题。
absolute是基于整个屏幕，它的父级元素如果设置 relative ,那就是基于它的父元素的左上角计算。按这里的理解，父级元素li必须设置position:relative;，显示的大图的位置才好定位。

大家可以直接复制下面的代码运行，只需要改一下小图、大图的url就可以看效果了。



<html>

<head>

<style type="text/css">

.products-normal li{position:relative; width:150px; height:220px; float:left;}

.product-small-info{position:relative; z-index:1;}

.product-big-info{position:absolute; z-index:99999; display:none; top:0px; left:0px;}

</style>

</head>



<body>

<div>

					<ul class="products-normal">

						<li>

							<div class="product-small-info" onmouseover="showBigPic('product1')" onmouseout="hideBigPic('product1')">

								<img src="./Public/Images/tmp3_120x120.jpg"/>

							</div>

							<div class="product-big-info" id="product1">

								<img src="./Public/Images/tmp3_220x220.jpg"/>

							</div>

						</li>

						<li>

							<div class="product-small-info" onmouseover="showBigPic('product2')" onmouseout="hideBigPic('product2')">

								<img src="./Public/Images/tmp_120x120.jpg"/>

							</div>

							<div class="product-big-info" id="product2">

								<img src="./Public/Images/tmp3_220x220.jpg"/>

							</div>

						</li>

					</ul>

</div>

<script type="text/javascript">

function showBigPic(liid){

	var liobj = document.getElementById(liid);

	liobj.style.display="block";

}

function hideBigPic(liid){

	var liobj = document.getElementById(liid);

	liobj.style.display="none";

}

</script>

</body>

</html>

------解决方案--------------------


 <ul class="products-normal">

                        <li  onmouseover="showBigPic('product1')" onmouseout="hideBigPic('product1')">

                            <div class="product-small-info">

                                <img src="./Public/Images/tmp3_120x120.jpg"/>

                            </div>

                            <div class="product-big-info" id="product1">

                                <img src="./Public/Images/tmp3_220x220.jpg"/>

                            </div>

相关资料更多>

  1. 十个很棒的html5、css和javascript效果
  2. HTML 旋钮添加mouseOver 和 mouseOut 事件,改变按钮的事件
  3. 请问一个ＨＴＭＬ有关问题
  4. 在网页内插入视频解决方案
  5. 怎么抓取浏览器用户请求信息
  6. <转>css在FF和IE上的区别
  7. HTML表单标志教程(2):<FORM>的属性运用
  8. CSS样式表中的类
  9. js验证码,封存html直接可以看效果吆