我在同一个页面中使用 YUI 布局和自动完成功能。问题是自动完成字段下拉列表落后于布局。 我认为问题出在 z-order 上，但经过一番研究后找不到。
这是我的一段简化代码，只需将它复制到 html 文件，它应该可以工作(例如输入字母 a 以查看问题):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/layout.css">
<link rel="stylesheet" type="text/css" href="main.css"></link>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/autocomplete/autocomplete-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="header" >
<div class="header2">
<span class="right-float topPad4px" id="myAutoComplete">
<input class="searchInput" id="searchInput" type="text" size="25" value=""/>
<div id="results"></div>
<input id="myHidden" type="hidden">
</span>
</div>
</div>
<div class="mainArea">
<div id="tree" class="tree" style="margin-left :20px">
</div>
<div id="center" class="centerDiv">
</div>
</div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 40, body: 'header', gutter: '0px'},
{ position: 'left', width: 280, resize: true, body: 'tree', scroll: true, animate: false },
{ position: 'center', body: 'center', scroll: true }
]
});
layout.render();
Event.on('tLeft', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('left').toggle();
});
});
})();
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
var ac = new YAHOO.widget.AutoComplete("searchInput", "results", ds);
</script>
</body>
</html>
我的问题是 - 我需要修改什么才能使自动完成下拉菜单出现在布局顶部？
最佳答案
好的，在yui论坛上找到了答案，基本上我需要加粗的元素:
{ position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 },
参见 http://developer.yahoo.com/yui/examples/layout/menu_layout.html有关更多详细信息，请参阅“修复隐藏的菜单”部分。
关于javascript - 使用带自动完成功能的 YUI 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8991828/