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

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

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

求打救！！！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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>