如何管理一个页面中多个虚拟窗口，实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）

石倩蓉

于 2015-07-16 22:03:11 发布

阅读量713

点赞数

分类专栏： jquery css

本文链接：https://blog.youkuaiyun.com/shiqianrongcsdn/article/details/46917867

版权

css 同时被 2 个专栏收录

19 篇文章

订阅专栏

jquery

7 篇文章

订阅专栏

本文介绍了如何在一个页面中管理多个具有不同z-index的虚拟窗口（div）。当用户点击任意一个div时，利用JavaScript将其z-index设置为最高，确保该div位于最前面并完全可见，不会被其他元素遮挡。示例代码中展示了使用jQuery实现这一功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
如何管理一个页面中多个虚拟窗口（div，通过 z-index 进行区分），实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="jquery-1.8.3.min.js"></script>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
#wins{position:relative;}
.win{width:200px;height:100px;position:absolute;}
.win1{background:yellow;left:0;top:0;}
.win2{background:red;left:50px;top:20px;}
.win3{background:green;left:100px;top:40px;}
.win4{background:blue;left:150px;top:60px;}
</style>
</head>
<body>
<div id="wins">
	<div class="win win1" >1</div>
	<div class="win win2">2</div>
	<div class="win win3">3</div>
	<div class="win win4">4</div>
</div>
<script type="text/javascript">
$("document").ready(function(){
	$('.win').click(function(){
		$('.win').css('zIndex','1');
		$(this).css('zIndex','2');		
		//this.style.zIndex=5;
	});
});
</script>
</body>
</html>