我们小组正在尝试为我们网站上销售的产品创建一个滑出式选项面板。
出于某种原因，CSS正在对我们起作用，让我们的图像正确分层是一件痛苦的事。在过去，z-index做了这个伎俩，但现在我们必须测试随机样式和变通方法，以便远程获取我们正在寻找的内容。
目前，我们有一个绝对内容的相对div，这应该已经为你的布局设计师提出了一个红旗。
一切都按预期运作，但为什么这不正常呢？我会从我们的ftp中提供一个示例，但出于某种原因，我的互联网正在起作用，我无法上传内容。
目前，这是我们的来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function move(name){
if (name.style.left == "500px")
{
$(name).animate({left: 0}, 300);
}
else if(name.style.left == "0px")
{
$(name).animate({left: 500}, 300);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Test</title>
</head>
<body>
<div class="item">
<div id="top" style="z-index:1; position: absolute; top:0px; left:0px; width:500px; height:375px;">
<img src="images/car1.jpg" />
</div>
<div id="bottom" style="z-index:-1; position:absolute; top: 0px; left:0px; width:550px; height:375px;">
<img src="images/car2.jpg" />
<div class="optionsExpandButton" style=" position:absolute; left: 500px; width:50px; height:375px; background-color: #000; z-index:inherit; float:left" onclick="move(bottom);"></div>
</div>
</div>
</body>
</html>
修改
忘记提及主要问题。
通常，当我们创建z-index时，图像将最终彼此低于对方而不是彼此之下。
例如：
-------------------------
| z-index: 1 | <- img 1
-------------------------
| z-index: -1 | <- img 2
-------------------------
答案 0 :(得分：1)
经过讨论，我意识到你想要一个向右/向左滑动的解决方案。这是解决方案，然后是一些更一般的建议。
首先是HTML：
<div class="item">
<div id="top">
<img src="http://img814.imageshack.us/img814/8089/car1j.jpg" alt="..." />
</div>
<div id="bottom">
<img src="http://img178.imageshack.us/img178/3779/car2dy.jpg" alt=".." />
</div>
<div class="optionsExpandButton"></div>
</div>
我在.optionsExpandButton内的#bottom有一些定位和点击问题，所以我把它放在外面。我相信你无论如何都可以这样做。
无论如何，请注意内联CSS或JS完全缺乏。不要忘记添加alt标签以获取辅助功能！
现在让我们设置定位，这样我们就可以正确地从左向右滑动。
我们将绝对定位.item并将3个div放在相对位置。
这意味着#top位于left:0, top:0。现在#bottom将低于left:0, top:375，但我们希望#top正确，#bottom将获得left:0, top:-375。展开div位于left:0, top:750，但我们希望它位于#top的高度及其右侧，因为#top为500宽，因此会生成展开按钮在left:500, top:-750：
CSS
img, div { border:0; padding:0; margin:0; }
div.item {
position: absolute; /* This could also be relative */ }
#top {
z-index:1;
position: relative;
top:0px; left:0px;
width:500px; height:375px; }
#bottom {
z-index:-1;
position:relative;
top: -375px; left:0px;
width:550px; height:375px; }
div.optionsExpandButton {
position:relative;
width:50px; height:375px;
top: -750px; left: 500px;
background-color: #000;
z-index:999; }
现在，让我们使用.toggle()向左滑动，而不是使用笨拙的if语句：
JS：
$(function() {
$(".optionsExpandButton").toggle(function() {
$(this).animate({left: '+=425' });
$("#bottom").animate({left: '+=425' });
}, function() {
$(this).animate({left: '-=425' });
$("#bottom").animate({left: '-=425' });
});
});
我建议不要使用内联JS和内联CSS。保持内容与功能和样式分开。
您可能会发现在没有定位的情况下列出所有div更容易，然后使用jQuery定位所有内容。这也适用于您的z-index。
看起来你想要显示一个图像，然后点击另一个图像。
我会告诉你一种简单易行的方法，而不用担心CSS。如果用户已禁用JS，则该方法会很好地降级，因为如果您依赖于设置CSS z索引并将一个图像放在另一个图像之上，那么这两个图像都是可见的。
首先，我将向您展示如何使用ID创建一个滑块，类似于您的方式。然后，我将向您展示如何使用类在一个页面上放置任意数量的不同图像滑块。
所以，首先，我会以一种没有JS的方式设置HTML。只有一张图像接着另一张。我不会内联JS或CSS。不要忘记您的alt无障碍标记。
<div class="item">
<div id="top">
<img src="images/car1.jpg" alt="..." />
</div>
<div id="bottom">
<img src="images/car2.jpg" alt="..." />
</div>
<!-- Don't nest this button in either top or bottom! -->
<div id="expand">+ Expand</div>
</div>
现在，jQuery可以在页面准备好时隐藏图像＃2，并在按下expane div时上下滑动它。你可以使用按钮的类，但这有点复杂，所以首先我将展示如何使用id：
$(function() { // <== doc ready
$("#bottom").hide(); // Hide the second image
// Define what happen on button click
$("#expand").click(function() {
var $this = $(this); // This is for efficiency
// Toggle the second image sliding up or down
$("#bottom").slideToggle();
// Toggle the writing in the button.
$this.html() == "+ Expand" ?
$this.html("- Contract") :
$this.html("+ Expand");
});
});
现在让我们概括并使用div设置某种方式的类。
HTML：
<div class="item">
<div class="top"><img src="img1a" alt="..." /></div>
<div class="bottom"><img src="img2a" alt="..." /></div>
<div class="expand">+ Expand</div>
</div>
<div class="item">
<div class="top"><img src="img1b" alt="..." /></div>
<div class="bottom"><img src="img2b" alt="..." /></div>
<div class="expand">+ Expand</div>
</div>
...
的jQuery
$(function() {
$("div.item div.bottom").hide();
$(".expand").click(function() {
var $this = $(this);
$this.prev().slideToggle();
$this.html() == "+ Expand" ?
$this.html("- Contract") :
$this.html("+ Expand");
});
});