使用YUI layout时菜单被遮挡问题的解决

使用YUI layout时菜单被遮挡问题的解决

今天在使用YUI的layout作布局，YUI的menu作菜单时，发生了菜单被其他部分遮挡
的问题,布局的代码如下，其中titlebar为菜单，content为页面中间的内容部分，
如下的代码菜单会被content部分遮挡。

function initLayout() {
var layout = new YAHOO.widget.Layout( {
units : [ {
position :'top',
height :50,
body :'titlebar'
}, {
position :'bottom',
height :50,
body :'statusbar'
}, {
position :'center',
body :'content'
} ]
});
layout.render();
};

经过对照YUI给出的例子，发现如下修改后可消除此问题：

function initLayout() {
var layout = new YAHOO.widget.Layout( {
units : [ {
position :'top',
height :50,
body :'titlebar',
scroll: null,
zIndex: 1
}, {
position :'bottom',
height :50,
body :'statusbar'
}, {
position :'center',
body :'content'
} ]
});
layout.render();
};

修改方法是在菜单部分增加了scroll和zIndex属性。

YUI API文档中的说明是这样的：
scroll - Boolean/Null
         Adds a class to the unit to allow for overflow: auto
         (yui-layout-scroll), default is overflow: hidden
         (yui-layout-noscroll). If true scroll bars will be placed
         on the element when the content exceeds the given area,
         false will put overflow hidden to hide the content.
         Passing null will render the content as usual overflow.

zIndex - {Number}
         The CSS zIndex to give to the unit, so you can have
         overlapping elements such as menus in a unit.

详细内容可以进一步参看CSS Overflow和zIndex属性