WebUI框架使用参考
关注jQuery easyui,zTree,my97,highcharts等前台UI的使用

首先强调的是，在正常状态下，子布局是不会遮盖父布局的，我所描述的bug是指：“在收缩或展开父布局某个region的时候，在jQuery的动画过程中，子布局的north,south,west,east四个region会遮盖父布局的相关region，动画结束后便会自动调整好。”。

如果我上面的描述还不够清楚的话，下面两个图应该会让你明白的：

这是正常状态的，没什么问题：

展开west区域的过程中出现问题了，居然被子布局的north区域给挡住了，很难看：

您可以认为它不是一个bug，但是我觉得这个过程实在是太丑陋了，看着总让人觉得不舒服，既然不舒服，就得想办法解决。

使用火狐的debug工具或者谷歌的审查元素都可以分析出来，layout的整体布局是：

“一个相对定位的父div，包裹五个绝对定位的子div，也就是五个region，其中center的z-index没有设置，north和south的z-index为3，west和east的z-index为2，expand部分的z-index为1。”。

单从“绝对定位会被束缚在最近的申明为绝对定位或者相对定位的上级元素”这个规律来讲，似乎不应该会出现这种情况，那么究竟是什么导致了这个现象呢？聪明的你一定会想到z-index这个混球。

如果你拜读过mg12的这篇讨论z-index的文章，并且也理解了，我想您也就能猜到我下面要写的内容了。

这种现象显然是easyui的作者没有非常深入地理解z-index这个css属性造成的，包裹五个region的div虽然设置为相对定位了，但是没有设置z-index值，除了IE6和IE7以外，其它浏览器默认z-index为auto，而z-index为auto的div将不参与z-index树，所以子布局的region就飞出去了。

写到这里，解决问题的办法也就出来了，非常简单，找到easyui.css和layout.css中对.layout样式的定义，加上z-index:0就可以了：

.layout{
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
	z-index:0;
}

是不是太容易了？确实很容易，但是如果您想真正地理解css对z-index属性的管理，我觉得您还是得花上几个小时时间慢慢研究才行，过程是复杂的。

更新日志:

2013-01-06:

这个问题在1.3之后的版本中均已修正，而且解决方案同于本文。