我有一个滚动条然后粘在页面顶部的栏，它有一些功能按钮。这是通过jQuery完成的。
页面的主div有一堆带文本字段的行。如果主div的z-index设置为-1，则div正确地在jQuery菜单下滚动，但无法编辑文本字段。
如果删除了z-index，则主div会滚动jQuery菜单并隐藏按钮。
有谁知道如何在jQuery菜单下使用主div幻灯片并仍然允许在textfields中输入？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Database inventory</title>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 250px;
}
.overflow {
height: 200px;
}
.demo_container { width:900px; margin: auto;}
#demo_top_wrapper { margin:0 0 20px 0; width: 100%;}
#demo_top
{
height:80px;
padding:20px 0 0 0;
width: 900px:
margin: auto;
}
#demo_title
{
background:url(images/trans-gray-60.png);
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
background_color:white;
}
#list_title { font:40px Georgia, serif; }
/* our menu styles */
#sticky_navigation_wrapper {
width:900px;
height:50px;
margin: auto;
}
#sticky_navigation
{
width:890px;
height:50px;
background:url(images/trans-black-60.png);
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
padding-top: 10px;
padding-left: 10px;
}
html, body
{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0, 'width': '100%'});
} else {
$('#sticky_navigation').css({ 'position': 'relative', 'width': '890px' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
$(function() {
$( "input[type=submit], a, button" )
.button()
});
</script>
</head>
<body>
<form action="groceryListProcess.php" method="post">
<div id="demo_top_wrapper">
<!-- a header with a logo just to have some content before the menu -->
<div id="demo_top">
<div class="demo_container">
<div id="list_title">Add item from database</div>
<div id="list_info">#list_info</div>
</div>
</div>
<!-- this will be our navigation menu -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<span style="vertical-align: top" id='addme'></span>
<span style="vertical-align: top" id='addnew'></span>
<span style="vertical-align: top" id='finish'></span>
</div>
</div>
</div>
<div style="">
<div style="width: 900px;
margin: 0 auto; margin-bottom: 20px; top: 10px; position: relative;
background-color: #f3f3f3; z-index: -1;">
<div style="margin: 0 auto; width: 750px; ">
<TABLE border=0><TR><TH style="text-align: left;" width = 50px></TH><TH style="text-align: left;" width = 50px></TH><TH style="text-align: left;" width = 60px> </TH><TH style="text-align: left;" width = 60px> </TH><TH style="text-align: left;" width = 600px> </TH><TH width = 25px></TH></TR><TR><TD colspan = 5><h2 style="margin-top: 6px; margin-bottom: 6px;">X</h2></TD></TR>
<TR>
<TD colspan=1></TD.
<TD colspan = 3><h3 style="margin-top: 6px; margin-bottom: 6px;">X</h3>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="text-align: right;"> </TD>
<TD style="text-align: left;"><B>Quantity</B></TD>
<TD style="text-align: right;"><B>Price</B></TD>
<TD style=" padding-left:10px;"><B>Item</B></TD>
<TD><B></B>
</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_145' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_234' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_6' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_150' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_387' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_99' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_203' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_317' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_88' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_128' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_176' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_257' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_230' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_114' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_162' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_202' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_316' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_87' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_111' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_143' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_256' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_305' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR><TR><TD></TD></TR>
<TR>
<TD colspan=1></TD.
<TD colspan = 3><h3 style="margin-top: 6px; margin-bottom: 6px;">X</h3>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="text-align: right;"> </TD>
<TD style="text-align: left;"><B>Quantity</B></TD>
<TD style="text-align: right;"><B>Price</B></TD>
<TD style=" padding-left:10px;"><B>Item</B></TD>
<TD><B></B>
</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_432' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_20' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_28' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_100' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_204' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_237' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_253' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_352' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_360' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_22' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_30' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_206' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_231' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_362' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_96' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_152' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_306' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_359' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_149' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_205' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_238' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_340' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_372' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_135' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR><TR><TD></TD></TR>
<TR>
<TD colspan=1></TD.
<TD colspan = 3><h3 style="margin-top: 6px; margin-bottom: 6px;">X</h3>
</TD>
</TR>
<TR>
<TD></TD>
<TD style="text-align: right;"> </TD>
<TD style="text-align: left;"><B>Quantity</B></TD>
<TD style="text-align: right;"><B>Price</B></TD>
<TD style=" padding-left:10px;"><B>Item</B></TD>
<TD><B></B>
</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_350' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_388' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_76' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_347' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_73' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_70' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD style=" padding-left:10px;">
<input type='text' size='2' name='prod_421' value='0'/></TD>
<TD style="text-align: right;">$X</TD>
<TD style=" padding-left:10px;">X</TD>
<TD style=" padding-left:10px;"></TD>
</TR></TABLE>
<script>document.getElementById('addme').innerHTML = "<input type='submit' name='itemsadded' value='Add Items to List'/>";</script>
<script>document.getElementById('addnew').innerHTML = "<input type='submit' id='itemsnew' name='itemsnew' value='Create New Item'/>";</script>
<script>document.getElementById('finish').innerHTML = "<input type='submit' name='return' value='Cancel'/>";</script>
<script>document.getElementById('list_info').innerHTML = "Available items: X";</script>
<input type ='hidden' name='list_id' value='9'/>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
将z-index添加到sticky_navigation
#sticky_navigation
{
width:890px;
height:50px;
background:url(images/trans-black-60.png);
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
padding-top: 10px;
padding-left: 10px;
z-index: 1;
}
从div中删除z-index：-1。
更新：刚看到这正是fzzfzzfzz在评论中建议的内容。